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

Question

我有一个简单的菜单/子菜单，带有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;
}

Answer 1

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

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