javascript - 在 mouseLeave 上关闭 jQuery 菜单

Question

我正在构建一个小的下拉容器，当您将鼠标悬停在菜单项顶部时会出现该容器。当我将鼠标悬停在菜单项(例如工具)的顶部时，会出现下拉菜单，我可以将鼠标移到里面，但是当光标离开下拉菜单时，它不会消失。我怎样才能做到这一点？

我只是设法让它在你点击它之外的某个地方时消失。

这是一个Fiddle.

var dropdown = $('.nav-dropdown');

dropdown.hide();

$('#dropdownToggle').hover(function(e) {
  e.preventDefault();
  dropdown.show(200);
  dropdown.addClass('active');

  $(window).click(function() {
    dropdown.slideUp();
  });

  e.stopPropagation();
});

---

SOLUTION by anima_incognita:

var dropdown = $('.nav-dropdown');

dropdown.hide();

$('#dropdownToggle').hover(function(e) {
  e.preventDefault();
  dropdown.show(200);
  dropdown.addClass('active');

  $(window).click(function() {
    dropdown.slideUp();
  });

  $(".nav-dropdown").on('mouseleave',function(){
      dropdown.slideUp();
  });

  e.stopPropagation();
});

Answer 1

这里是你代码中的编辑，对我来说效果很好...添加的方法

var dropdown = $('.nav-dropdown');

dropdown.hide();

$('#dropdownToggle').mouseenter(function(e) {
  e.preventDefault();
  dropdown.show(200);
  dropdown.addClass('active');

  $(window).click(function() {
    dropdown.slideUp();
  });

$('#dropdownToggle').mouseleave(function(e) {
dropdown.slideUp();
});
  e.stopPropagation();
});