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

在这里，使用this answer。为简洁起见，我简化了代码，updated your fiddle也是如此。

$('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;
});

Wordpress下拉菜单点击打开

1 个答案: