javascript - 导航栏上的 Jquery 下拉菜单不起作用

Question

我有以下下拉代码:

$(document).ready(function(){
    $(".dropbtn").hover(function(){
        $(".dropdown-content").slideDown("fast");
    });
    $(".dropdown").mouseout(function(){
        $(".dropdown-content").slideUp("fast");
    });
});

.dropdown-content {
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">##</a>
  <div class="dropdown-content">
    <a href="#">##</a>
    <a href="#">##</a>
  </div>
</li>
</ul>

但是当我将鼠标悬停在下拉内容上时，它会收缩，就好像下拉内容不是 li 类“下拉列表”的一部分，在 jquery 中从中触发滑动。我怎样才能使下拉内容仅在鼠标离开导航元素或下拉内容时向上滑动？

Answer 1

如果您添加一个容器，您可以确保事件只针对整个元素触发。此外，使用 mouseleave 也可以防止子元素触发事件。

$(document).ready(function() {
  $(".container").mouseover(function() {
    $(".dropdown-content").slideDown("fast");
  });
  $(".container").mouseleave(function() {
    $(".dropdown-content").slideUp("fast");
  });
});

.dropdown-content {
  display: none;
}

.container {
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    <div class="container">
      <a href="javascript:void(0)" class="dropbtn">##</a>
      <div class="dropdown-content">
        <a href="#">##</a>
        <a href="#">##</a>
      </div>
    </div>
  </li>
</ul>