設置WordPress菜單當點擊子菜單時激活

我有一個WordPress下拉菜單。處於活動狀態時，我使用CSS代碼在所選菜單項下劃線。這適用於根級菜單項和子菜單項。我想要做的就是當點擊一個子菜單項時，將下拉菜單設置爲活動狀態。我試圖在jQuery中。設置WordPress菜單當點擊子菜單時激活

jQuery(function($) { 
    $(".navbar .nav .nav-item.dropdown li").click(function() { 
     $(".navbar .nav .nav-item.dropdown").addClass('active'); 
    }); 
}

它幾乎可以工作。當我點擊子菜單項時，我可以看到下拉菜單變爲活動狀態，但是直接返回到非活動狀態。我認爲發生的事情是jQuery觸發，並將下拉菜單設置爲活動狀態，然後重新加載頁面，並且活動消失。

任何想法如何讓它堅持下去？

來源

2017-07-15 Scott Kilbourn

想過這件事後，我意識到這是嚴重超越這個。我需要在頁面加載後查看子菜單項。這是我做錯了第一件事。之後，我所需要做的就是獲取一個子菜單項列表，檢查它們中是否有活動類，如果有，請將下拉列表項設置爲活動狀態。下面是爲我做這個的代碼。有沒有更好的辦法？

$(window).load(function (e) { 
    var listItems = $('.navbar ul li ul.dropdown-menu .nav-item'); 

    //Loop the listitems and check to see if any are active. 
    $.each(listItems, function(key, litem) { 
     if ($(litem).hasClass('active')) { 
      $(".navbar .nav .nav-item.dropdown").addClass('active'); 
      return false; 
     } 
    }) 
})

來源

2017-07-16 02:02:49

它被刪除的原因是因爲您在點擊時運行功能，而不是在加載新子頁面時運行功能。

所以你可以做的是，當你登陸頁面有一個jQuery函數，檢查是否有任何子菜單項是活動的，然後addClass父。

正如我不知道這是定製菜單或WP菜單讓我們假設你有結構是這樣的：

<ul class="parent-menu"> 
    <li>Parent Item 
    <ul> 
     <li class="someSubMenuClass active">Child Item</li> 
    </ul> 
    <li> 
</ul>

，你可以在這個時候做的是使用jQuery.closest('.parent-menu') 找到與一流的最接近的父元素父母菜單，並在你發現你需要添加類到那個元素。因此，它可能是這樣的：

$(document).ready(function() { 
    $("li.someSubMenuClass.active").closest('.parent-menu').addClass('active'); 
});

請注意，我不知道你的結構，所以你可能需要更新結構，但這個應該可以正常工作。

來源

2017-07-17 10:48:14

設置WordPress菜單當點擊子菜單時激活

回答

相關問題