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

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

Answer 2

将此添加到代码的末尾：

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

Answer 3

更新你的JS：

＆＃13;

＆＃13;

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

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

＆＃13;

.nav-list {
  .nav-list-item {
    float: left;
    list-style: none;
    padding: 2rem;
    background: tomato;
    font-family: 'Helvetica', 'Arial', sans-serif;
    a {
      text-decoration: none;
      text-transform: uppercase;
      font-weight: bold;
      color: #fff;
    }
    .nav-dropdown {
      position: absolute;
      background: turquoise;
      padding: 2rem;
      li {
        margin-bottom: 2rem;
      }
    }
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav-list">

  <li class="nav-list-item">
    <a href="#" class="nav-link services">Services</a>
  </li>

  <li class="nav-list-item dropdown-wrapper">
    <a href="#" id="dropdownToggle" class="nav-link tools">Tools
								</a>
    <!-- dropdown -->
    <ul class="nav-dropdown active" style="display: block;">

      <li class="nav-dropdown-item">
        <a href="#" class="nav-dropdown-item-link">Buyer Cost Sheet</a>
      </li>

      <li class="nav-dropdown-item">
        <a href="#" class="nav-dropdown-item-link">Seller Net Sheet</a>
      </li>

      <li class="nav-dropdown-item">
        <a href="#" class="nav-dropdown-item-link">Mortage Calculator</a>
      </li>

      <li class="nav-dropdown-item">
        <a href="#" class="nav-dropdown-item-link">Title Fees</a>
      </li>

      <li class="nav-dropdown-item">
        <a href="#" class="nav-dropdown-item-link">Refi Calculator</a>
      </li>

      <li class="nav-dropdown-item">
        <a href="#" class="nav-dropdown-item-link">Real Estate Forms</a>
      </li>

    </ul>
  </li>

  <li class="nav-list-item">
    <a href="buyersandsellers.html" class="nav-link buy-sale">Buyers &amp; Sellers</a>
  </li>

</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

当您使用悬停功能时，悬停功能指定两个触发mouseenter和mouseleave事件的功能

您只定义了mouseenter函数，但未定义mouseleave函数。以下是更新的JS代码：

$('#dropdownToggle').hover(function(e) {
 e.preventDefault();
 dropdown.show(200);
 dropdown.addClass('active');
 e.stopPropagation();
}, function(e){
e.preventDefault();
dropdown.slideUp();;
dropdown.removeClass('active');
});