Question

我为响应式网站创建了一个菜单，所有内容都按照我想要的方式工作，但是当您打开第二个子菜单时，其他子菜单保持打开状态。

是否有一种简单的方法可以在打开当前菜单之前关闭所有打开的菜单。

这是我的菜单结构：

<ul id="menumain">
   <li class="MenuLevelOne"><a href="brandon-news.php">News</a></li>
   <li class="MenuLevelOne"><a href="businesses.php">Businesses</a></li>
   <li class="MenuLevelOne"><a href="events.php">Events</a></li>
   <li class="MenuLevelOne"><a href="webcams.php">Webcams</a></li>
   <li class="MenuLevelOne MenuDD"><a href="#" onclick="return false;">History</a>
      <ul class="MenuLevelTwo">
         <li><a href="webcams.php">Brief History</a></li>
         <li><a href="webcams.php">Brandon at War</a></li>
         <li><a href="webcams.php">Heritage Centre</a></li>
         <li><a href="webcams.php">Historic Maps</a></li>
      </ul>
   </li>
   <li class="MenuLevelOne MenuDD"><a href="#" onclick="return false;">Community</a>
      <ul class="MenuLevelTwo">
         <li><a href="webcams.php">Brief History</a></li>
         <li><a href="webcams.php">Brandon at War</a></li>
         <li><a href="webcams.php">Heritage Centre</a></li>
         <li><a href="webcams.php">Historic Maps</a></li>
      </ul>
   </li>
</ul>

这是jQuery代码：

$(".MenuDD").click(function () {
        $(this).find("ul").toggle();
        $(this).toggleClass("darkbg");
    });

Answer 1

试试这个：

$(".MenuDD").click(function () {
    $(this).siblings().find("ul").hide();
    $(this).find("ul").toggle();
    $(this).siblings().removeClass('darkbg');
    $(this).toggleClass("darkbg");
});

<强> Working Demo

Answer 2

点击列表项后，您可以隐藏所有子菜单.MenuLevelTwo，只显示点击列表项下的子菜单：

$(".MenuDD").click(function () {
    var submenu = $(this).find("ul");
    $('.MenuDD ul').not(submenu).hide();
    $(this).find("ul").toggle();
    $(this).toggleClass("darkbg");
});

<强> Fiddle Demo

Answer 3

这应该有效：

$(".MenuDD").click(function () {
    $('.MenuDD ul').hide();
    $(this).find("ul").toggle();
    $(this).toggleClass("darkbg");
});

Answer 4

HTML：

<ul id="list">
    <li><a href="#">SUBMENU1</a>

        <ul>
            <li><a href="#">M11</a>
            </li>
            <li><a href="#">M12</a>
            </li>
            <li><a href="#">M13</a>
            </li>
            <li><a href="#">M14</a>
            </li>
        </ul>
    </li>
    <li><a href="#">SUBMENU2</a>

        <ul>
            <li><a href="#">M21</a>
            </li>
            <li><a href="#">M22</a>
            </li>
            <li><a href="#">M23</a>
            </li>
            <li><a href="#">M24</a>
            </li>
        </ul>
    </li>
</ul>

的JQuery：

 $('#list > li').siblings().find('ul').hide();
        $('#list > li').click(function () {
            if($(this).find('ul').is(':visible'))
            {
                $(this).find('ul').slideUp();
            }
            else{
            $(this).addClass('active').siblings().removeClass('active');
            $(this).siblings().find('ul').slideUp();
            $(this).find('ul').slideDown();
            }
        });

演示：

http://jsfiddle.net/2QKe9/2/

jQuery关闭所有打开的菜单

4 个答案: