jquery hover li>ul - 保持可见，直到从子 UL 中移除鼠标

Question

代码：

        $("ul.menu_body li:even").addClass("alt");
        $('li a.menu_head').hover(function () {
            $('ul.menu_body').slideToggle('medium');
        },
            function(){
        $('ul.menu_body').slideToggle('medium');
            });

在网上找到了这段代码，原来是“li a.menu_head”上的点击事件，用于显示和隐藏“ul.menu_body”。

点击效果很好。我更喜欢悬停效果。

不幸的是，只要您将鼠标从原始 LI 上移开，我的代码就会立即隐藏 UL。我怎样才能调整这个，以便“ul.menu_body”保持可见，直到鼠标离开 UL，而不仅仅是“li a.menu_head”。

谢谢。

我的html是

   <li> <a href="#" class="menu_head"></a>
      <ul class="menu_body">
        <li>content</li>
        <li>content</li>
      </ul>
   </li>

Answer 1

你可以尝试

    $('li a.menu_head').mouseenter(function () {
        $('ul.menu_body').slideDown('medium');
    });
    $('ul.main_UL_class_here').mouseleave(function(){
    $('ul.menu_body').slideUp('medium');
        });

Answer 2

    $('li a.menu_head').hover(function () {
        $('ul.menu_body').show()
    });

    $('ul.menu_body').hover(function () {

    },
    function(){
        $('ul.menu_body').hide();
   });

进行了更多的尝试和错误，似乎做到了。不确定“blanK”功能是否正确。

Answer 3

问题是你正在使用悬停，尝试这样

$(document).ready(function() { 
    $("ul.menu_body li:even").addClass("alt");
    $('ul.menu_body').slideToggle('medium');

    $('li a.menu_head').bind('mouseenter', function () {
        $('ul.menu_body').slideDown('medium');
    });
    $('.menu_body').bind('mouseleave', function(){
        $('ul.menu_body').slideUp('medium');
    });
});