Question

我一直在努力使Wordpress自定义主题响应。由于在多站点安装中使用它们的方式，我觉得最好的方法是将主菜单变成可折叠的小屏幕上的下拉菜单。我是一个jQuery新手，但经过一些失败的尝试后，我设法编写自己的脚本，使用父/子控制可折叠菜单。所以这是我的问题。当有一个没有子菜单的项目时，有一种方法可以让jQuery检测到没有子元素并允许点击链接而不是这样吗？
这是我的代码：

<a href="#navigation" class="mobile-nav-link">Navigation</a>
<nav id="access" class="menu" role="navigation">
<div id="nav-wrap-mobile">
<div id="nav-wrap-sub-mobile">
<div class="menu-main-menu-2-container">
<ul id="menu-main-menu-5" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37"><a href="http://link.to.thing">Parent 1</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1877"><a href="http://link.to.thing">Child 1</a>
</li>
</ul>
</li>
</ul>
<ul id="menu-main-menu-5" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://link.to.thing">Parent 1</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1879"><a href="http://link.to.thing">Child 2</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1878"><a href="http://link.to.thing">Child 2</a>
</li>
</ul>
</li>
</ul>
<ul id="menu-main-menu-7" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37"><a href="http://link.to.thing">No Parent</a></li>
</ul>
</div>
</div>
    </div>
</nav>
<!-- #access- -->

这是jQuery

jQuery(document).ready(function() {
$('#nav-wrap-mobile').hide();
$('.mobile-nav-link').click(function() {
$('#nav-wrap-mobile').toggle();
});
jQuery(document).ready(function() {
$('ul.sub-menu').hide();
$('ul.menu').children().click(function(e) {
e.preventDefault();
$(this).children('ul.sub-menu').toggle();}).children('ul.sub-menu').click(function (event) { 
 event.stopPropagation();
    });
   });
  });

这是一个Jsfiddle，说明了我想说的话：

http://jsfiddle.net/nivims/S48ZV/15/

提前致谢：）

Answer 1

您可以检查是否有子列表，添加：

if ($(this).children('ul').length == 0) {
    return;
}

到右下方：

$('ul.menu').children().click(function (e) {

可折叠的jQuery下拉菜单 - 停止事件传播

1 个答案: