jquery - 菜单 jquery 状态 is-active is-not-active

Question

我有一个带有状态的 jQuery 菜单，但遇到了一个小问题。

现在我的代码可以在所有<li>中运行，但每个 <li> 应该不同因为将是一个带有不同图标的菜单。

例如，当单击 fa-bars 时，需要具有黄色，但是当单击 fa-search 时，需要具有红色，我需要将其应用于 <li>因为我需要更改 li背景。

所以基本上我想做的是:第一次点击时为黄色，第二次点击时返回原始颜色。

那申请各个fa图标明白吗？

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

Answer 1

使用toggleClass() 方法来切换类并使用 this 在事件处理程序回调中引用单击的元素。

$(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>