jQuery：我需要一个自定义 hide() 来切换菜单答案

【问题标题】：jQuery: I need a custom hide() for toggling menujQuery：我需要一个自定义 hide() 来切换菜单
【发布时间】：2013-01-30 22:12:31
【问题描述】：

我有一个带有 jquery click() 函数和 toggle() 的简单菜单/子菜单。我的问题是，toggle() 工作正常，但是当例如#submenu1 已打开，我单击“菜单 2”，当然 #submenu1 仍然可见，并且两个子菜单重叠。所以我需要一个 hide() 子菜单，但我没有得到它的工作！我尝试了 not()、siblings() 没有成功。任何帮助表示赞赏！提前致谢。

jQuery:

$('#menu li').click(function() {
$('div', this).stop(true, true).animate({ 'height': 'toggle' }, 300);
 });

HTML：

<ul id="menu">
   <li><a href="#">Menu 1</a>
       <div id="submenu1">
           <ul>
              <li>Submenu 1</li>
           </ul>
       </div>
   </li>
   <li><a href="#">Menu 2</a>
       <div id="submenu2">
           <ul>
              <li>Submenu 2</li>
           </ul>
       </div>
   </li>
</ul>

CSS：

#submenu1, #submenu2 {
z-index: 99;
position: absolute;
background: #6fb700;
display: none;
}

【问题讨论】：

标签： jquery

【解决方案1】：

试试：http://jsfiddle.net/D9pq8/

$('#menu li').click(function () {
   $(this).siblings().children('div').hide();
   $('div', this).stop(true, true).animate({ 'height': 'toggle' }, 300);
});

【讨论】：

【解决方案2】：

尝试使用 jquery 选项卡执行此操作。垂直模式下的主菜单和默认模式下的子菜单例如：Tabs UI

【讨论】：

【解决方案3】：

扩展@silagy 发布的内容：

 $('#menu li').click(function() {
     $("#menu li div.active").hide().removeClass('active');
    $('div', this).addClass('active').stop(true, true).animate({ 'height': 'toggle' }, 300);
});

这只是添加了一个“活动”类，因此不会对菜单项进行双重动画处理。

【讨论】：

对不起，我上面提到的 silagy 问题是一样的。

【解决方案4】：

试试这个

编辑以缩短版本

$("#menu li").click(function() {
    if($('div' , this).css('display') != 'block')
            $("#menu li div.active").hide().removeClass('active');

      $('div', this).addClass('active').stop(true, true).animate({ 'height': 'toggle' }, 300);  
});

Fiddle Example

This is your fiddel example

【讨论】：

这个我试过了，还是不行。从一个菜单切换到另一个菜单适用于此，但切换相同的菜单不再起作用（因为首先隐藏自身）。
谢谢，这正是我所需要的:) .. 有没有机会得到一个更短的版本？
更新缩短版