Question

我有一个带标题的菜单。单击标题时，将打开子菜单项。我想只显示最近点击过的菜单。如果单击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

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

Answer 2

只需添加以下行：

$('[class^=menu]').hide('fadeIn');

像这样：

$(document).ready(function () {

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

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

        }
    });

});

在切换当前的那个之前，这将隐藏所有其他人。

Demo

Answer 3

点击功能中的一个新行就是您所需要的（并且您可能会丢失if支票）：

$("#pageHeadings div[id^=heading]").click(function () {
    $("#pageHeadings div[id^=heading]").not($(this)).find('[class^=menu]').slideUp();
    $(this).find('[class^=menu]').slideToggle("fast");
});

<强> jsFiddle example

隐藏当前未选择的菜单

3 个答案: