Jquery将活动类添加到父类

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

我相信这就是你要找的。​​p>

基本上，当单击锚点时，它会从根菜单项中删除所有 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
})