使用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 ...