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>

Answer 2

您需要使用this，即当前元素上下文。使用.closest()到li元素遍历，然后执行toggleClass()方法添加/删除该类。

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

Answer 3

尝试各种功能，如

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

这里是您更新的代码 https://jsfiddle.net/oosa8yzk/10/

menu jquery state is-active is-not-active

3 个答案: