Question

我在点击菜单项时使用jquery代码来打开和关闭子菜单。它工作正常，但是当我点击另一个顶级菜单项时，我无法关闭打开的子菜单。

例如，当点击菜单2时，当子菜单1已经打开时，我希望子菜单1在子菜单2打开时关闭。

我猜我在做兄弟功能时做错了什么但是我找不到什么......

这是我的HTML（我无法修改我的HTML，它是一个wordpress生成的菜单

<div class="menu-menu_top-container">
    <ul id="menu-menu_top" class="menu">
        <li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-67"><a href="#">MENU 1</a>
            <ul class="sub-menu">
                <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-49 current_page_item menu-item-63"><a href="#">SUB MENU 1</a></li>
                <li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="#">SUB MENU 2</a></li>
                <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="#">SUB MENU 3</a></li>
                <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="#">SUB MENU 4</a></li>
                <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="#">SUB MENU 5</a></li>
                <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66"><a href="#">SUB MENU 6</a></li>
            </ul>
        </li>

        <li id="menu-item-76" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-76"><a href="#">MENU2</a>
            <ul class="sub-menu">
                <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="#">SUB MENU 1</a></li>
                <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="#">SUB MENU 2</a></li>
                <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="#">SUB MENU 3</a></li>
                <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="#">SUB MENU 4</a></li>
            </ul>
        </li>
        <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="#">MENU 3</a></li>
        <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="#">MENU 4</a></li>
        <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="#">MENU 5</a></li>
        <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="#">MENU 6</a></li>
    </ul>
</div>

这是我的JS代码：

$("ul.sub-menu").hide();
$(".menu-menu_top-container li a").click(function() {
    $(this).next("ul.sub-menu").slideToggle('xfast').siblings('ul.sub-menu:visible').slideUp('xfast');
});

和jsfiddle：http://jsfiddle.net/MFb8f/1/

任何人都可以帮我这个吗？

非常感谢，

Answer 1

$(".menu-menu_top-container li a").click(function () {
    $('ul.sub-menu').not( $(this).next() ).slideUp();
    $(this).next("ul.sub-menu").slideToggle();
});

http://jsfiddle.net/isherwood/MFb8f/11

Answer 2

试试这个：

$("ul.sub-menu").hide();
var prevMenu = null;

$(".menu-menu_top-container li a").click(function () {
    if ($(this).is(prevMenu)) {
        $(this).next("ul.sub-menu").slideToggle('xfast');
    } else {
        if (prevMenu) $(prevMenu).siblings("ul.sub-menu").slideUp('xfast');

        $(this).next("ul.sub-menu").slideToggle('xfast');
        prevMenu = $(this);
    }
});

<强> Demo

jquery手风琴菜单，兄弟打开子菜单

2 个答案: