Javascript 隐藏非'；t当前选定的

我有一份有标题的菜单。单击标题时，子菜单项将打开。我只想显示最近单击的菜单。如果单击

heading\u 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
});

试验

测试2

试验

测试2

$（“#页面标题div[class^=菜单]”）.hide（）；
$（“#页面标题div[id^=heading]”。单击（函数（）{
如果（！$（this）.find（“[class^=menu]”）是（“：可见”））{
$（this.find（“[class^=menu]”）。滑动切换（“fast”）；
}
//如果单击元素，则隐藏所有其他菜单
});

---

您可能希望在所有其他元素上执行滑动。这可以通过如下方式实现：

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

---

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

只需添加这一行：

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

        }
    });

});

这将在切换当前选项之前隐藏所有其他选项

只需添加这一行：

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

        }
    });

});

这将在切换当前选项之前隐藏所有其他选项

---

您只需要在单击功能中添加一行即可（如果选中，您可能会丢失

）：

您只需在单击功能中添加一行即可（如果选中，您可能会丢失
）：

如果我是您，我将为同一类分配所有菜单项，然后在单击时向该类添加一个“选定”类。最后，使用jQuery选择器选择所有没有类“selected”的菜单项并将其隐藏。如果我是你，我将为所有菜单项分配相同的类，然后在单击时向类添加一个类“selected”。最后，使用jQuery选择器选择所有没有“selected”类的菜单项并将其隐藏。这是唯一的答案，只有在单击的项被隐藏时才会切换，这似乎更符合OP的要求+1简单地说，如果您对添加一点CSS没意见，您也可以真正清理HTML和jQuery。看一看：。。。如果你想让第二次点击关闭菜单，你可以进一步清理它：100%同意上面@AndyM的解决方案，我的代码确实可以解决最初的问题，但最好按照最佳实践对其进行重组。这是唯一的答案，只有当点击的项目被隐藏时才会切换，这似乎是OP想要的+1简单地说，如果您对添加一点CSS没意见，您也可以真正清理HTML和jQuery。看一看：。。。如果你想让第二次点击关闭菜单，你可以进一步清理它：100%同意上面@AndyM的解决方案，我的代码确实可以解决最初的问题，但是按照最佳实践重新构造它是个好主意。