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

jquery hover li＆gt; ul - 保持可见，直到从子UL中删除鼠标

3 个答案: