Wordpress下拉菜单点击打开 [英] Wordpress drop-down-menu open on click

问题描述

我正在尝试制作一个点击打开的wordpress下拉菜单。当您选择一个帖子并且该页面加载该帖子时，它应该保持打开状态。问题是我正在使用自定义菜单项链接，锚链接到什么（＃）只是为了使它们可点击。当我点击可点击的第二级标题项目时，菜单将打开，但第3级职位上的链接不起作用，而是单击它们时菜单关闭。

HTML：

 < li id =menu-item-272class =main menu-item menu- item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-272< a href =＃>主菜单标题项< / a> 
< ul class =子菜单style =display：block;> 
< li id =menu-item-740class =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-741class =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-742class =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-743class =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-744class =second bez menu-item menu-item-type-custom menu-item-object-custom menu-item-744>< a href =＃>可点击的第二级标题项< / a> 
< ul class =子菜单style =display：none;> 
< li id =menu-item-288class =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-290class =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-292class =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：

 code> $（'＃menu-header ul.sub-menu li.second：not（。third）'）。toggle（function（）{
 $（this）.find .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，不透明度：hide}，400）; 
}）; 
  

解决方案

这里你去，使用这个答案。我已经简化了代码的清晰度，并更新了你的小提琴。

$ b $（$（$（$））$ $ $ $ $ $ $ $ $ $ ）.children（'。子菜单'）。slideToggle（'slow'）;
}）。children（'ul'）。find（'。third'）。click（function（event）{
event.stopPropagation（）;
console.log（'hello！'）;
return false;
}）;

I'm trying to make a wordpress drop-down menu that opens on click. Thing is it should stay open when you select a post and the page loads that post. Problem is I'm using custom menu item link which anchor links to nothing ("#") just to make them clickable. The menu opens when I click the "Clickable 2nd level title item", but links on the "3rd level posts" don't work but instead the menu closes when I click them.

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 );
    });

解决方案

Here you go, used this answer. I've simplified the code for clarity and updated your fiddle as well.

$('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下拉菜单点击打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！