Question

我是jQuery的新手，所以如果这是一个愚蠢的问题，我很抱歉。但我一直在寻找Stack Overflow，我可以找到一半工作的东西，我只是无法让它完全发挥作用。我有一个带有2个嵌套子菜单的标签，点击主标签(Products)后，如果我点击了(products)的子菜单(Buttons)，它仍会主动显示(products)如果我点击了按钮的子菜单(i.e. Button1)，主要标签(Products)和子菜单(Buttons)仍处于活动状态，则再次激活。

我想点击任意标签的submenu，Submenu的父标签变为非活动状态。

任何帮助都会很棒！

这是我尝试过的。

HTML文件

<ul>
    <li> <a href="{% url 'home' %}" class="waves-effect"><i class="mdi mdi-home"></i><span> Home  </span></a> </li>
    <li class="has_sub"> <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-album"></i> <span> Products </span> <span class="pull-right"><i class="mdi mdi-plus"></i></span></a>
    <ul class="list-unstyled">
        <li class="has_sub"> <a href="javascript:void(0);" class="waves-effect"><span> Buttons </span> <span class="pull-right"><i class="mdi mdi-plus"></i></span></a>
        <ul class="list-unstyled">
            <li><a href="#">Buttons1</a></li>
            <li><a href="#">Buttons2</a></li>
        </ul>
    </li>
    <li><a href="#">Panels</a></li>
    <li><a href="#">Tabs &amp; Accordions</a></li>
    <li><a href="#">Modals</a></li>

</ul>

Jquery的

 i.$leftMenuToggle.on("click", function(e) {
            e.stopPropagation(), i.openLeftBar()
        }), 
        i.$menuItem.on("click", i.menuItemClick), 
        i.$firstMenuChild.parents("li:last").children("a:first").addClass("active").trigger("click"), 

        i.$menuItem.each(function() {
            this.href == window.location.href && (e(this).addClass("active"), 
                e(this).parent().addClass("active"), 
                e(this).parent().parent().prev().addClass("active"), 
                e(this).parent().parent().prev().trigger("click"))
        })

Answer 1

请查看以下代码段以供参考。

＆＃13;

$('a').click(function(){
  $('.myUL').find('.active').removeClass('active');
  $(this).addClass('active');
})

＆＃13;

.active{
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myUL">
  <li> <a href="#" class="waves-effect"><i class="mdi mdi-home"></i><span> Home  </span></a> </li>
  <li class="has_sub"> <a href="javascript:void(0);" class="waves-effect"><i class="mdi mdi-album"></i> <span> Products </span> <span class="pull-right"><i class="mdi mdi-plus"></i></span></a>
    <ul class="list-unstyled">
      <li class="has_sub"> <a href="javascript:void(0);" class="waves-effect"><span> Buttons </span> <span class="pull-right"><i class="mdi mdi-plus"></i></span></a>
        <ul class="list-unstyled">
          <li><a href="#">Buttons1</a></li>
          <li><a href="#">Buttons2</a></li>
        </ul>
      </li>
      <li><a href="#">Panels</a></li>
      <li><a href="#">Tabs &amp; Accordions</a></li>
      <li><a href="#">Modals</a></li>

    </ul>

＆＃13;

Jquery在mutlilevel子菜单中添加和删除活动类

1 个答案: