javascript - 隐藏当前未选择的菜单

我有一个带标题的菜单。单击标题后，子菜单项将打开。我只想显示最近被单击的菜单。如果单击heading_practice，并且其他菜单已打开，则它们将滑动关闭。我怎样才能做到这一点？

<div id="pageHeadings">
    <div id="heading_practice">
        <a href="#">
           <p>Practice Areas</p>
        </a>
        <div class="menu_practice">
           <p>test</p>
           <p>test2</p>
        </div>
    </div>
    <div id="heading_about">
        <a href="#">
           <p>About</p>
        </a>
        <div class="menu_about">
           <p>test</p>
           <p>test2</p>
        </div>
    </div>
 </div>

$("#pageHeadings div[class^=menu]").hide();

$("#pageHeadings div[id^=heading]").click(function () {
    if(!$(this).find('[class^=menu]').is(":visible")) {
        $(this).find('[class^=menu]').slideToggle("fast");
    }

    //if element is clicked, hide all other menus
});

Fiddle

最佳答案

您可能想对所有其他元素执行slideUp。可以这样实现：

$("#pageHeadings div[id^=heading]").click(function () {
    var $menu = $(this).find('[class^=menu]');

    if ( ! $menu.is(":visible") ) {
        $menu.slideToggle("fast");
    }

    $('[class^=menu]').not($menu).slideUp("fast");
});

关于javascript - 隐藏当前未选择的菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23419855/