隐藏当前未选择的菜单

时间:2014-05-02 02:31:22

标签: javascript jquery html css

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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

只需添加以下行:

$('[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

答案 2 :(得分:1)

点击功能中的一个新行就是您所需要的(并且您可能会丢失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