Question

我想制作一个导航菜单，点击后会添加活动类。此外，单击子项时，其父项将添加活动类并删除当前活动类（只有一个将处于活动状态）。例如，单击链接3时，链接2和链接1将不会处于活动状态。单击链接2.1时，只有链接2处于活动状态。

<ul class="additional-menu">
<li class="active"><a href="#">Link1</a></li>
<li><a href="#" id="link2">Link2</a></li>
<ul>
<li><a href="#" id="link2.1">Link2.1</a></li>
</ul>
<li><a href="#" id="link3">Link3</a></li>
</ul>

Jquery的：

$('.additional-menu').on('click','li', function(){
$(this).addClass('active').siblings().removeClass('active');

});

Answer 1

我相信这是你正在寻找的。

基本上，当单击一个锚点时，它会从根菜单项中删除所有active类。然后，它会将课程active添加到所有父li

FIDDLE

HTML（从您的演示更正）

<ul class="additional-menu">
  <li class="active"><a href="#">Link1</a></li>
  <li><a href="#" id="link2">Link2</a>
    <ul>
      <li><a href="#" id="link2.1">Link2.1</a></li>
    </ul>
  </li>
  <li><a href="#" id="link3">Link3</a></li>
</ul>

JS

$('.additional-menu a').on('click', function() {
  var t = $(this); //optional but faster if we use it more than once
  t.parents('.additional-menu').find('li').removeClass('active'); //remove all the active classes
  t.parentsUntil('.additional-menu', 'li').addClass('active'); //set the active class to all the li parents of the anchor element
})

Jquery将活动类添加到父类

1 个答案: