点击打开Wordpress下拉菜单

Question

我试图制作一个在点击后打开的wordpress下拉菜单。 当您选择一个帖子并且页面加载该帖子时，它应该保持打开状态。 问题是我正在使用自定义菜单项链接，该链接将链接锚定为没有任何内容（“＃”）只是为了使它们可单击。 单击“可单击的第二级标题”时，菜单打开，但是“三级帖子”上的链接不起作用，但是当我单击它们时，菜单关闭。

HTML：

<li id="menu-item-272" class="main menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-272"><a href="#">Main menu title item</a>
<ul class="sub-menu" style="display: block;">
    <li id="menu-item-740" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-740"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-741" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-741"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-742" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-742"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-743" class="third menu-item menu-item-type-post_type menu-item-object-post menu-item-743"><a href="http://xyz.com">Post 1st lvl</a></li>
    <li id="menu-item-744" class="second bez menu-item menu-item-type-custom menu-item-object-custom menu-item-744"><a href="#">Clickable 2nd level title item</a>
    <ul class="sub-menu" style="display: none;">
        <li id="menu-item-288" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-288"><a href="http://xyz.com">Post 3rd lvl</a></li>
        <li id="menu-item-290" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-290"><a href="http://xyz.com">Post 3rd lvl</a></li>
        <li id="menu-item-292" class="third menu-item menu-item-type-taxonomy menu-item-object-category menu-item-type-post_type menu-item-object-post menu-item-292"><a href="http://xyz.com">Post 3rd lvl</a></li>
    </ul>
</li>
</ul>
</li>

jQuery的：

$('#menu-header ul.sub-menu li.second:not(".third")').toggle(function() {
        $(this).find('ul.sub-menu:first-of-type')
            .stop(true, true).delay(50).show("slow");
    }, function(){
        $(this).find('ul.sub-menu:first-of-type')
            .stop(true, true).delay(150).animate({ "height": "hide", "opacity": "hide" }, 400 );
    });

Answer 1

在这里，使用此答案 。 为了简化起见，我简化了代码，并更新了您的小提琴 。

$('ul.sub-menu').children('.second').click(function(){
    $(this).children('.sub-menu').slideToggle('slow');
}).children('ul').find('.third').click(function (event) {
    event.stopPropagation();
    console.log('hello!');
    return false;
});