javascript - 隐藏当前未被选中的菜单

Question

我有一个带标题的菜单。单击标题时，将打开子菜单项。我只想显示最近被点击的菜单。如果单击 heading_practice，并且其他菜单打开，它们将 slideToggle 关闭。我该怎么做？

<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

Answer 1

您可能想对所有其他元素执行 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");
});