Question

我想只显示点击的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>

jQuery的：

  jQuery(document).ready(function ($) {
    $("#menu-main-menu").on('click', 'button', function (event) {
        $('ul.sub-menu').appendTo('.site-content');
        if($('ul.sub-menu:visible').length)
          $('ul.sub-menu').hide();
        else
          $('ul.sub-menu').show();
    });
  });

CSS：

#menu-main-menu ul.sub-menu {
    display: none;
}

ul.sub-menu {
    display: none;
    position: absolute;
    z-index: 200000;
    top: 0;
    left: 1.5%;
    right: 1.5%;
    margin: 0 auto 0 auto;
    padding: 20px;
    list-style: none;
}
ul.sub-menu li {
    width: 24%;
    display: inline-block;
    padding: 8px 9px;
    text-align: center;
}

ul.sub-menu .toggled-on {
    display: block;
}
.site-content {
    display: block;
    position: relative;
}

解决方案：所以这里的解决方案是不使用appendTo（），因为我必须将元素放回到切换时来自的位置。解决方案只是使用正确的位置切换菜单项：.sub菜单的绝对CSS和$（）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;
    }
   });

Answer 1

在此处查看：http://jsfiddle.net/abdqt6d9/

问题是您为jquery编写了错误的选择器：

$('ul.sub-menu')

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

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

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

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

Answer 2

$("ul.sub-menu")将应用于所有子菜单，因此您需要将其更改为仅查找父按钮中的子菜单。您可以使用.closest（或仅.parent()）然后.find

执行此操作

//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();

如果您的按钮始终位于子菜单之前，您可以将其缩小到.next(".sub-menu")

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

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

2 个答案: