Question

我知道有关于此的数百个主题，但是它们似乎都不适合我。我希望鼠标在使用jQuery离开元素时隐藏下拉列表，这就是我目前得到的：

jquery的：

$(document).ready(function() {
  $('.expand').click(function(e) {
    e.preventDefault();
    $('section').slideUp('normal');
    if ($(this).next().is(':hidden') === true) {
        $(this).addClass('on');
        $(this).next().slideDown('normal');
    }
  });
  $('section').hide();
});

$('section').mouseleave(function(){
    $(this).hide();
});

我还尝试过以下方法：

$('section').hide();
$('.section').on('mouseout',function(){
    $(this).hide();
})

然而，似乎没有什么能正常工作并给我相同的结果。我该如何解决这个问题？

Answer 1

<强> Working example

您应该使用setTimeout()/clearTimeout()函数来解决您的问题，因此您必须将mouseleave事件附加到包含dropbtn类和mouseleave/mouseleave个事件的按钮（使用{{ 1}}）到div hover()所以当鼠标离开按钮到任何其他元素时，你应该检查dropdown-content是否在下拉列表中，如果是，则清除mouseenter所以超时它不会隐藏div，否则你的超时会在50ms后隐藏下拉列表：

var hide_dropdown;

hide_dropdown

希望这有帮助。

Answer 2

你编码令人困惑所以我为你想要的东西做了一个简单的例子。

点击此处片段＆gt;

not(is.na(v)) %>% all()

$(".dropbtn").click(function(){
           var showMe = $(this).siblings(".drop-menu"),
               visibleDrop = $(this).parent("li").siblings("li").find(".drop-menu").filter(":visible")
           $(showMe).slideDown()
           $(visibleDrop).slideUp()
      $(showMe).mouseleave(function(){
             $(this).slideUp()
     })
})

ul { list-style:none;margin:0;padding:0}
ul li { display:inline-block;width:20%;position:Relative}
ul ul li { display:block;}
ul ul  { display:none;position:absolute;top:100%;left:0;}

或小提琴＆gt;的 jsFiddle

让我知道是否有帮助

Answer 3

<div>
<a href="#" id="menu_opener">Menu</a>
</div>
<div id="menudiv" style="position: fixed; background-color: white; display: none;">
    <a href="#" id="A1">Page 1</a><br />
        <a href="#" id="A2">Page 2</a><br /> 
    <a href="#" id="A3">Page 3</a><br />                           
</div>

链路： - http://jsfiddle.net/5SSDz/

Answer 4

在您的codepen示例中，我在准备好的回调中添加了以下代码片段，这似乎有效。

$('.expand').on("mouseleave", function(e){
  e.preventDefault();
  $('section').slideUp('normal');
});

这是完整的js代码

$(document).ready(function() {

 $('.dropbtn').on("mouseleave", function(e){
   $(".dropdown-content").removeClass("show");

});
$('.expand').on("click", function(e) {
e.preventDefault();
$('section').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
    $(this).addClass('on');
    $(this).next().slideDown('normal');
}
});
$('section').hide();
});

在mouseout上使用jQuery隐藏下拉列表div

4 个答案: