WordPress子菜單的子菜單下拉問題

Question

我在子菜單中顯示子菜單時出現問題，這是在您單擊子li時顯示的。

我遇到的問題是，當您單擊子li來打開子子菜單時，它沒有將相關的類添加到子子菜單中。 這是我正在使用的jQuery。

$('.menu-item-has-children').on('click', function() {

    var submenu = $(this).children('.sub-menu');

    if(submenu.hasClass('menu-open')) {
        submenu.removeClass('menu-open');
      $(this).removeClass('menu-active');
    } else {
        $('.sub-menu').removeClass('menu-open');
        $('li').removeClass('menu-active');
        submenu.addClass('menu-open');
        $(this).addClass('menu-active');
    }

});

我認為這可能與嘗試在單擊其他li時從所有“子菜單”類中刪除“菜單打開”類有關，但是我對如何更正此感到困惑。

這是我的小提琴的鏈接，希望它將比我能解釋的更詳細地說明我的問題。

https://jsfiddle.net/08gckq8n/

謝謝。

Answer 1

您遇到的部分問題是，您試圖在li上運行on('click') ，而您的所有.sub-menus都位於頂級父li 。 因此，無論您在何處單擊，都始終單擊父級（最上面的li ），因此無法獲得預期的結果。

您將遇到的另一個問題是，一旦鏈接處於活動狀態，您將無法打開這些鏈接，因為您將導航至頁面，而不是打開sub-menus 。

下面的代碼通過toggleClass簡化了JS，並附加了一個元素以供單擊。

 var $menu_item = $('.menu-item-has-children'); $menu_item.append('<span class="caret"></span>'); $('.caret').click(function() { $(this).parent().toggleClass('menu-open'); }); 

 li { position: relative; } li>.caret { display: inline-block; position: absolute; left: 250px; top: 0; z-index: 10; } .caret::before { content: '+'; display: block; width: 25px; height: 25px; text-align: center; font-size: 18px; } li.menu-open>.caret::before { content: '-'; display: block; } .sub-menu { display: none; position: relative; } .menu-open>.sub-menu { display: block; z-index: 10; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="site-navigation"> <div class="menu-main-menu-container"> <ul id="primary-menu" class="menu"> <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8 menu-active"> <a href="#">Root Menu Item</a> <ul class="sub-menu"> <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"> <a href="#">Subchild item</a> </li> <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"> <a href="#">Subchild item</a> </li> <li id="menu-item-229" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-229"> <a href="#">Subchild item with submenu</a> <ul class="sub-menu"> <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"> <a href="#">Sub-subchild item</a> </li> <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"> <a href="#">Sub-subchild item</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> 

這是工作的小提琴： https : //jsfiddle.net/disinfor/anbau0ya/5/

您將必須對.caret進行一些樣式.caret ，但這將使您更接近想要的操作。

您還可以調整WP nav菜單的輸出以包括caret ，但這是一個完全不同的問題/解決方案。

Answer 2

代碼存在一些問題，但您的方向正確。

click事件的選擇器設置為.menu-item-has-children ，在代碼中有兩個這樣的元素，層次結構中的上一個（稱為“ li wrapper”）包裝所有菜單鏈接，即如果您想一次單擊每個元素，則會出現問題。 看一下窗口右側的屏幕截圖，藍色部分是li wrapper元素區域，每次您單擊菜單中的某些鏈接時，您還將單擊li wrapper元素，因此您將在菜單項中獲得兩個元素。事件而不是一個。

現在讓我們仔細看一下代碼：

$('.menu-item-has-children').on('click', function() {

        var submenu = $(this).children('.sub-menu');

        if(submenu.hasClass('menu-open')) {
            submenu.removeClass('menu-open');
          $(this).removeClass('menu-active');
        } else {
            $('.sub-menu').removeClass('menu-open');
            $('li').removeClass('menu-active');
            submenu.addClass('menu-open');
            $(this).addClass('menu-active');
        }

    });

單擊sub .menu-item-has-children元素時，將為兩個元素設置submenu變量，最后一個是li包裝器。

sub .menu-item-has-children元素為它及其子.sub-menu獲得正確的類，但是在第二個元素（li wrapper）加入后，它將刪除第一個.menu-item-has-children的類。 .menu-item-has-children元素，並將類再次設置為li wrapper元素。

那么從這里做什么？ 首先，您可以將click事件選擇器設置為.menu-item-has-children a ，以一次僅單擊一個元素，然后在submenu變量中調用其li parent來查找.sub-menu子級。 我更願意向您展示更短，更簡單的代碼：

$('body').on('click', '.menu-item-has-children a', function() {
    $(this).parent().find('> .sub-menu, .sub-menu.menu-open').toggleClass('menu-open');
});

單擊時，我們通過找到> .sub-menu, .sub-menu.menu-open搜索元素> .sub-menu, .sub-menu.menu-open ，第一個用於直接的.sub-menu子級，第二個用於關閉.sub-menu子級已經打開。 我們使用.toggleClass（）在兩種情況之間進行切換，因此我們無需檢查類是否需要檢查，也無需添加添加和刪除類的額外操作： https : //jsfiddle.net/08gckq8n/84/