3

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;
}
4

4 に答える 4

1

試してみてください：http：//jsfiddle.net/D9pq8/

$('#menu li').click(function () {
   $(this).siblings().children('div').hide();
   $('div', this).stop(true, true).animate({ 'height': 'toggle' }, 300);
});
于 2013-01-30T14:12:31.703 に答える
0

@silagyが投稿したものを拡張する：

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

これは単に「アクティブ」クラスを追加するだけなので、メニュー項目を二重にアニメーション化する必要はありません。

于 2013-01-30T13:51:53.027 に答える
0

これを試して

編集してバージョンを短くする

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

フィドルの例

これはあなたのフィデルの例です

于 2013-01-30T13:33:33.050 に答える
0

jquery タブでこれを実行してみてください。垂直モードのメイン メニューとデフォルト モードのサブメニュー 例:タブ UI

于 2013-01-30T13:47:19.463 に答える