menu jquery state is-active is-not-active

Question

I have a jQuery menu with state but I am getting a small problem.

Now my code is working in all <li>, but should be different for each <li> because will be a menu with different icons.

so for example fa-bars when is clicked need to have color yellow, but when fa-search is clicked need to have color red I need apply this for the <li> because I need change the li background.

so basicly what I am try to do is: when click first time be yellow and when i click second time back to the original color.

that applying for each fa icon understand?

jsfiddle: https://jsfiddle.net/oosa8yzk/4/

html:

<ul>
  <li>
    <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
      <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
    </a>
  </li>
  <li>
    <a class="search"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
  </li>
</ul>

jquery

$(document).ready(function() {
  $('li a').on('click', function() {
    $('li').removeClass('active');
    $('li').addClass('active');
  });
});

css:

.active {
  color: blue;
  background-color: red;
}

.active .fa {
  color: yellow;
}

Pranav C Balan · Accepted Answer · 2016-05-30T11:53:28.040

1

Use toggleClass() method to toggle the class and use this to refer the clicked element inside the event handler callback.

$(document).ready(function() {
  $('li a').on('click', function() {
    $(this)
      .closest('li') // get the list item
      .toggleClass('active') // toggle active class of it
      .siblings() // get sibling li
      .removeClass('active'); // remove active class from siblings
  });
});

.active {
  color: blue;
  background-color: red;
}
.active .fa {
  color: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
      <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
    </a>
  </li>
  <li>
    <a class="search"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
  </li>
</ul>

edited May 30 '16 at 11:53

answered May 30 '16 at 11:43

Pranav C Balan

113,687
23
165
188

thanks very much, but for example i clicked in the first icon righ? so if i click in the second one should remove the color of the top one, right now is keepng the color. – raduken May 30 '16 at 11:47
Best answers ever thank you, that menu will be expandable so if i click once show to me a box if i click again hide the box,so It's a way to make the icon return to the origin color after clicked again? e.g.: first time insert the class, if clicked again in the same icon remove the class. – raduken May 30 '16 at 12:00
@Raduken : youl cal use `slideToggle()` for that – Pranav C Balan May 30 '16 at 13:06
thanks for that, I was testing this on mobile and seems not work well with touch, how can I make that runs on Iphone and Ipad? – raduken May 30 '16 at 13:10
@Raduken : you can use touch event – Pranav C Balan May 30 '16 at 13:11
@Raduken : this may help you http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible – Pranav C Balan May 30 '16 at 13:12

Satpal · Answer 2 · 2016-05-30T11:49:33.630

You need to use this i.e. current element context. traverse up using .closest() to li element then execute the toggleClass() method to add/remove the class.

$('li a').on('click', function() {
    $('li').not(this).removeClass('active');
    $(this).closest('li').toggleClass('active');
});

$(document).ready(function() {
  $('li a').on('click', function() {
    $('li').not(this).removeClass('active');
    $(this).closest('li').toggleClass('active');
  });
});

.active {
  color: blue;
  background-color: red;
}
.active .fa {
  color: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
      <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
    </a>
  </li>
  <li>
    <a class="search"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
  </li>
</ul>

thanks, but i need remove the color of the last icon if i click in a new one. — raduken, May 30 '16 at 11:48
Best answers ever thank you, that menu will be expandable so if i click once show to me a box if i click again hide the box,so It's a way to make the icon return to the origin color after clicked again? e.g.: first time insert the class, if clicked again in the same icon remove the class. — raduken, May 30 '16 at 12:00

score 1 · Answer 3 · answered May 30 '16 at 11:56

1

Try each function like

$(document).ready(function() {$('li').each(function() {
$(this).click(function(e) {
        $('li').removeClass('active');
    $(this).addClass('active');
});});});

here your updated code https://jsfiddle.net/oosa8yzk/10/

answered May 30 '16 at 11:56

Bhupesh

883
7
16

menu jquery state is-active is-not-active

3 Answers3