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

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