2

你好朋友我已经尝试了以下代码，你可以在这里看到http://jsfiddle.net/QCdz4/我想编写下拉菜单的代码，以便在它不工作click()时出现和消失，mouseout()请帮助我提前谢谢

jQuery

<script>
    $(document).ready(function(){
        $('.click ul').css({display:'none', position:'absolute'});
        $('.click').click(function() {
            $(this).children('ul').slideDown(200);
            $(this).on('mouseout', function() {
                $(this).children('ul').slideUp(200);
            })
        })
    })
</script>

HTML

<div class="click">
    click
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>
4

4 回答 4

2

您需要 mouseleave 而不是 mouseout，因为当您从父元素悬停到子元素时也会触发 mouseout。位于父元素上方的子元素（读取：z-index）。在这种情况下，将光标从父元素移动到子元素将触发 mouseout 事件，但不会触发 mouseleave 事件。只有当您将光标从父级和子级移开时，才会触发 mouseleave 元素。

$(document).ready(function(){

   $('.click ul').css({display:'none', position:'absolute'});


   $('.click').on('click', function(){
       $("ul", $(this)).slideDown(200);
   }).on('mouseleave', function(){
       $("ul", $(this)).slideUp(200);
   });   


})

更新：可以在这里找到一篇非常好的文章，其中包含非常清晰的现场演示：jquery 中 mouseout 和 mouseleave 之间的区别。（查看带有子元素的正方形。右下角的那个）

于 2012-04-17T08:33:53.000 回答
1

用这个

$(document).ready(function(){
    $('.click ul').css({display:'none', position:'absolute'});
$('.click').click(function(){

     $(this).children('ul').slideDown(200);
})

$('.click ul').hover(
  function () {
    // do nothing
  }, 
  function () {
    $('.click ul').slideUp(200);
  }
);
});
于 2012-04-17T09:16:59.267 回答
0

您以错误的方式链接您的功能。

$('.click').click(function(){
     $(this).children('ul').slideDown(200);
}).on('mouseout', function(){
    $(this).children('ul').slideUp(200);
});

改进上面的代码，

$('.click').on('click', function(){
     $("ul", $(this)).slideDown(200);
}).on('mouseout', function(){
    $("ul", $(this)).slideUp(200);
});

更新

为确保光标在元素外后触发事件，您必须使用 mouseleave 而不是 mouse out

$('.click').on('click', function(){
     $("ul", $(this)).slideDown(200);
}).on('mouseleave', function(e){
        $("ul", $(this)).slideUp(200);
});

演示

于 2012-04-17T08:31:57.160 回答
0

将 mouseout 事件的绑定移到 click 事件的绑定之外

$(document).ready(function(){

$('.click ul').css({display:'none', position:'absolute'});

$('.click').click(function(){

 $(this).children('ul').slideDown(200);

}) $('.click').on('mouseout', function(){

$(this).children('ul').slideUp(200); })

})​</p>

于 2012-04-17T08:35:13.253 回答