點擊顯示子導航點擊

我有默認的wordpress菜單，它顯示懸停的子導航鏈接，但我只想在用戶單擊父鏈接時顯示子導航。你可以在這裏看到我的菜單https://jsfiddle.net/foley13/83sk1p1x/點擊顯示子導航點擊

我有一個JavaScript應該做到這一點，但不工作。

$(function(){ 
    //Hide all the sub menus 
    $('.sub-menu').hide(); 

    $("li:has(ul)").click(function(){ 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle('fast'); 
     $(this).toggleClass("down"); 
    }); 
});

我不知道CSS是否阻止這項工作，但我只是想刪除懸停，只是點擊。

來源

2017-06-21 Duggy G

你有麻煩李：has（ul）。只需添加班級「下拉」到這些有下拉的李。 ;）

來源

2017-06-21 09:29:25

下面是對我的作品的代碼，我的jsfiddle打開的jQuery：

https://jsfiddle.net/83sk1p1x/2/

(function(){ 
    //Hide all the sub menus 

    $('li.menu-item-has-children').hover(function(){ 
    $('li.menu-item-has-children').children("ul.sub-menu").css({"display":"none"}); 
    return; 
    }); 

    $("li.menu-item-has-children").click(function(e){ 
     e.preventDefault(); 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle('fast'); 
     $(this).toggleClass("down"); 
    }); 
})();

然而，在WordPress（由於其問題與jQuery的$），你將有以這種方式編寫函數：

(function($){ ... 
    // code 
}(jQuery);

來源

2017-06-21 09:32:14

試試這個

腳本

$(function(){ 
    $("li:has(ul)").click(function(){ 
     $(this).toggleClass("hover"); 
    }); 
});

而且在css你需要.hover Check working fiddle

來源

2017-06-21 09:36:37 Manoj

這很好，我已經書籤爲將來的參考。 –

三江源更換:hover對您有所幫助，但我設法仍然有我的原始腳本來解決我的問題：

$(function(){ 
    //Hide all the sub menus 
    $('.sub-menu').hide(); 

    $("li:has(ul)").click(function(){ 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle('fast'); 
     $(this).toggleClass("down"); 
    }); 
});

但我刪除了左邊：-999em;從.sub菜單和.sub菜單ul，這解決了懸停問題

來源

2017-06-21 10:57:25

點擊顯示子導航點擊

回答

相關問題