Question

我想创建水平菜单，在主菜单上显示鼠标下方，鼠标输出时显示下方。

问题在于，如果鼠标从一个菜单项移动到另一个菜单项也有子菜单，我希望菜单下的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'} );  


            });

这是我正在研究的example，如果鼠标从带有id 1 ti li的li移动到id2

，我怎么能用class noti打开div

如果有一个更好的方法可以顺畅地上下滑动子弹，我将非常感激。

Answer 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'
        });
});

<强> DEMO

jquery菜单向上/向下滑动 - 当鼠标移开时保持子菜单打开？

1 个答案: