jquery手风琴菜单，同级打开子菜单

我使用jquery代码在单击菜单项时打开和关闭子菜单。 它工作得很好，但当单击另一个顶部菜单项时，我很难关闭打开的子菜单

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

我想我做了一些错误的兄弟函数，但我不能找出什么

这是我的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>

和一个jsfiddle：

有人能帮我吗

非常感谢

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

试试这个：

$("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);
    }
});

---

比我的解决方案优雅得多。+1灵活性是编程中的一大优势。-）非常感谢您的帮助@isherwood！作品perfectly@isherwood，是否有方法防止单击子菜单项时关闭我的菜单？如果你能帮我，非常感谢！我找到了解决方案，这里是：$（“.menu-menu\u top-container li a”）。不是（$（'ul.sub-menu li a'）。单击（函数（）{无论如何谢谢！谢谢你的帮助@Michael_B，我会使用Isherwood解决方案，就像你想象的那样！；-）是的，这是一个更好的解决方案。

$("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);
    }
});