使用javascript将活动类添加到主菜单

Question

我已经搜索了很多用于使用javascript将活动类添加到父菜单。

我找到了更多的例子，但没有一个为我工作，下面是我的代码

HTML

<div id="menu1" class="hmenu">
    <ul>
        <li><a href="#">Item1</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
                <li><a href="#">SubItem2</a> </li>
                <li><a href="#">SubItem3</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <br style="clear: left" />
</div>

我的要求是当我点击SubItem1然后Item1和SubItem1都应该是活动的。

当我点击SubSubItem1然后SubSubItem1 ， SubItem1和Item1应该是活动的。

意味着当点击任何链接时，它的所有父链接和相同的链接应该是活动的。

我试过这个javascript代码：

$(document).ready(function () {
        $('.hmenu ul li ul').find('li').click(function () {
            //removing the previous selected menu state
            $('.hmenu').find('li.active').removeClass('active');
            //adding the state for this parent menu
            $(this).parents('li').addClass('active');
        });
    });

实际上我没有任何javascript编码经验，也无法在我的code找出问题。

任何人都可以建议我这样做。

Answer 1

问题来自.find('li').click() 。

当您使用nestsed <li> ，当您单击子项<li>时，这将导致事件被触发两次。 这会导致问题。 你不能将click()添加到<a>元素吗？

$(document).ready(function () {
    $('.hmenu a').click(function () {
        //removing the previous selected menu state
        $('.hmenu').find('li.active').removeClass('active');
        //adding the state for this parent menu
        $(this).parents("li").addClass('active');

    });
});

它运作得很好： https ： //jsfiddle.net/6put8tdx/

---

请注意，您的页面将同时单击要撞到顶端a ，因为标签#锚。 如果要阻止这种情况，可以将事件传递给函数.click(function (event) {...}并在其中添加event.preventDefault 。

Answer 2

如果你需要点击目标作为LI元素（而不是Delgan的答案）

你可以在目标LI的parents使用.not()来防止搞乱冒泡的事件目标：

$(document).ready(function () {

  $('.hmenu').find('li').click(function(event) {
    event.preventDefault();                   // Prevent page jumps due to anchors
    var $par = $(event.target).parents("li"); // get list of parents
    $(".hmenu .active").not( $par ).removeClass("active");  // not them
    $(this).addClass('active');               // let the event propagation do the work
  });

});

 $(document).ready(function () { $('.hmenu').find('li').click(function(event) { event.preventDefault(); var $par = $(event.target).parents("li"); $(".hmenu .active").not($par).removeClass("active"); $(this).addClass('active'); }); }); 

 .active > a{ background: gold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu1" class="hmenu"> <ul> <li><a href="#">Item1</a> <ul> <li><a href="#">SubItem1</a> <ul> <li><a href="#">SubSubItem1</a></li> <li><a href="#">SubSubItem2</a></li> </ul> </li> <li><a href="#">SubItem2</a> </li> <li><a href="#">SubItem3</a> <ul> <li><a href="#">SubSubItem1</a></li> <li><a href="#">SubSubItem2</a></li> </ul> </li> </ul> </li> <li><a href="#">Item2</a></li> <li><a href="#">Item3</a> <ul> <li><a href="#">SubItem1</a> <ul> <li><a href="#">SubSubItem1</a></li> <li><a href="#">SubSubItem2</a></li> </ul> </li> </ul> </li> </ul> <br style="clear: left" /> </div> 

为了更好地理解上述内容
下面的示例开箱即用，单击的一个和所有它的LI父级获得"active"类。
为什么？ 因为事件目标是li ，意味着任何li .hmenu - 所以单击附加到其中任何一个，并单击子目录 LI事件将传播到LI父项 - 触发相同的click行为（ 此添加类 ）！

$(".hmenu").on("click", "li", function(){
   $(this).addClass("active"); // Wow! Event propagation rulez!!
});

但我们需要删除现有的.active ，这里变得凌乱......

$(".hmenu").on("click", "li", function(){
   $(".active").removeClass("active"); // triggered on every event bubble :(
   $(this).addClass("active"); // leaving only the main parent with active class
});

这是由事件起泡并触发父元素的相同操作时发生的并发性引起的。

防止并发性的方法之一是使用setTimeout的1毫秒：

$(".hmenu").on("click", "li", function(){
   $(".active").removeClass("active");
   setTimeout(function(){  // Let the previous finish the bubbling mess
      $(this).addClass("active"); // Yey! all fine! Every LI has the active class
   }, 1);
});

但是这里1ms的超时可能导致视觉“闪烁”问题。

Answer 3

试试这个：

 $(function () {
     $("li a")
       .on("click", function () {
         $(this).toggleClass("active");
         $(this).closest("ul").parent().children("li a").toggleClass("active")
       .parent().parent().parent().children("li a").toggleClass("active");

     });
 });

小提琴

从点击的元素遍历。 并使用toggleClass()来避开世俗检查hasclass removeClass ...