CODEWITHSUNDEEP
jquery
raduken
raduken

Reputation: 2119

menu jquery state is-active is-not-active

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;
}

Upvotes: 1

Views: 59

Answers (3)

Bhupesh
Bhupesh

Reputation: 881

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/

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115222

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>

Upvotes: 1

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 1

Related Questions