Javascript 所有子菜单都会在单击时显示

我只想显示子菜单，它是单击的li和按钮的子菜单。当前，单击和显示以及隐藏正在工作，但下面的代码显示了单击时的两个子菜单，我只希望li按钮的子菜单在单击时显示

<ul id="menu-main-menu" class="nav-menu">
    <li class="menu-item"><a href="#">Menu link</a>
    <button aria-expanded="false" class="dropdown-toggle"></button>
        <ul class="sub-menu">
            <li class="menu-item"><a href="link1.htm">link1</a></li>
            <li class="menu-item"><a href="link2.htm">link1</a></li>
        </ul>
    </li>
    <li class="menu-item"><a href="#">Menu link 2</a>
    <button aria-expanded="false" class="dropdown-toggle"></button>
        <ul class="sub-menu">
            <li class="menu-item"><a href="link1.htm">link1</a></li>
            <li class="menu-item"><a href="link2.htm">link1</a></li>
        </ul>
    </li>
</ul>
<div class="site-content"></div>

CSS:

解决方案：所以这里的解决方案是不使用appendTo，因为我必须将元素放回它在关闭时的位置。解决方案只是使用正确的位置来切换菜单项：绝对CSS用于.sub菜单，而$on'click'用于切换菜单项

   jQuery('#menu-main-menu').on('click', 'button', function(event) {
      if($(this).closest("li.menu-item").children("ul.sub-menu").length > 0)
    {
      $(this).closest("li.menu-item").children("ul.sub-menu").slideToggle('fast');
      return false;
    }
   });

看到它在这里工作：

问题是您为jquery编写了不正确的选择器：

$('ul.sub-menu')

这意味着它将获取页面中所有匹配的元素

你需要做的是抓住相应的李。在单击中，$this将成为单击的按钮。使用.parent将为您提供li元素。从那里，在li_元素中搜索相应的子菜单：

var $li_element = $(this).parent()
var $sub_menu = $li_element.find(".sub-menu")
if ($li_element.find(".sub-menu:visible").length > 0) {
    $sub_menu.hide()
} else {
    $sub_menu.show()
}

另一个问题是，子菜单的样式可能在按钮上方。所以一旦你展示了它，你就不能再按按钮了。因此，您需要重新设置子菜单的样式。

$ul.sub-menu将应用于所有子菜单，因此您需要将其更改为仅在父按钮中查找子菜单。你可以使用或只是然后

如果你的按钮总是在子菜单之前，你可以把它缩小到

---

你的if和else语句缺少了花括号{}。@ChrisYongchu这纯粹是文体上的。啊，我不知道。谢谢@ChrisYongchu这部分很好你这里最大的问题是附加，建议的答案不会完全起作用-因为：如果你在网站内容中附加最近的子菜单，它将从父菜单中删除，所以你不能在第二次单击时再将其作为目标-试着不附加就这样做，和使用自定义数据属性的目标子菜单…真的不知道如何在我的代码中实现这一点above@Grant，将每个$'ul.sub menu'替换为代码shownThanks，您的答案确实解决了正确选择父元素的问题，但我的appendTo方法不是正确的。最后，我使用CSS将子菜单的位置：绝对位置正确放置在我需要的位置。我尝试了你的代码，但它根本没有显示子菜单$sub-menu连字符抛出错误，因此我删除了它。也许您的样式子菜单在按钮上方？查看my js Fiddle：只有按钮才能切换子菜单如何获取链接以切换菜单？请将此答案也应用于链接。我不能为你做所有的工作。

$('ul.sub-menu')

var $li_element = $(this).parent()
var $sub_menu = $li_element.find(".sub-menu")
if ($li_element.find(".sub-menu:visible").length > 0) {
    $sub_menu.hide()
} else {
    $sub_menu.show()
}

//closest("li") will find the closest parent that is an li
//find(".sub-menu") will find the sub-menu within
$(this).closest("li").find(".sub-menu").show();

$(this).next(".sub-menu").show();