Question

你好朋友我已经尝试了下面的代码，因为你可以在这里看到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>

Answer 1

您需要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);
   });   


})

更新：可以在此处找到一篇非常好的文章和非常清晰的现场演示：Different between mouseout and mouseleave in jquery。（查看带有子元素的正方形。右下角的那个）

Answer 2

使用此

$(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);
  }
);
});

Answer 3

你用错误的方式链接你的功能。

$('.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而不是鼠标

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

Demo

Answer 4

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

$(document).ready(function(){

$（'。点击ul'）。css（{display：'none'，position：'absolute'}）;

$（ '点击'）。点击（函数（）{

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

}） $（'。click'）。on（'mouseout'，function（）{

$（本）。儿童（ 'UL'）效果基本show（200）。 }）

}）

在Jquery中下拉菜单

4 个答案: