0

メインメニューでマウスを下向きにし、マウスを下向きにする水平メニューを作成したいと思います。

問題は、マウスをあるメニュー項目からサブメニューもある別のメニュー項目に移動した場合でも、メニューの下のdivを表示したいということです。

これがHTMLです

 <div class="menu_it">
                    <ul>
                        <li id="i1"><a href="#">
                          program 1
                            </a>
                            <div class="subMenuWrapper">
                                <ul class="subMenu">
                                    <li> <a href="#"> sub program 1</a></li>
                                      <li> <a href="#"> sub program 1</a></li>
                                            <li> <a href="#"> sub program 1</a></li>

                                </ul> 
                            </div>
                        </li>
                        <li id="i2"> 
                            <a href="#"> program 2</a>

                            <div class="subMenuWrapper">
                                <ul class="subMenu">
                                       <li> <a href="#"> sub program 2</a></li>
                                     <li> <a href="#"> sub program 2</a></li>
                                     <li> <a href="#"> sub program 2</a></li>

                                </ul>
                            </div>
                        </li>
                        <li id="i3" ><a href="#"> sub program 3</a>

                        </li>

 </ul>
</div>
 <div class="noti"><span class="text">
 This is a notification bar   This is a notification bar   This is a notification bar   This is a notification bar   This is a notification bar   This is a notification bar   This is a notification bar 
    </span>
</div>

そしてここにjsがあります

$('.menu_it > ul li:has(> div ul)').on('mouseenter',function(e) {
    console.log('in');


                  $(this).find('div').slideDown('fast');
                 $('.noti').animate({'margin-top':'41'} ); 


            })
            .on('mouseleave',function(e) {
            console.log('out');

               $(this).find('div').slideUp('fast');
              $('.noti').animate({'margin-top':'0'} );  


            });

これが私が取り組んでいる例です。マウスがid1のliからid2のtiliに移動した場合、クラスnotiを使用してdivを開いたままにするにはどうすればよいですか。

サブミューのためにスムーズに上下にスライドするためのより良い方法があれば、私は非常に感謝します。

4

1 に答える 1

1

これを参照してください：

$('.menu_it > ul li:has(> div ul)').on('mouseenter', function (e) {

    $(this).find('div').slideDown('fast');
    $('.noti').animate({
        'margin-top': '41'
    });
})
    .on('mouseleave', function (e) {
    $(this).find('div').slideUp('fast');
    if ($('.menu_it > ul li:hover div ul').length != 1) 
        $('.noti').animate({
            'margin-top': '0'
        });
});

デモ

于 2013-03-27T08:00:32.007 に答える