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


            });

这是我正在处理的示例，如果鼠标从 id 为 1 的 li 与 id2 的 li 移动，我如何使具有类 noti 的 div 仍然打开

如果有更好的方法让 submeu 上下平滑滑动，我将非常感激。

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 回答