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也可以防止子元素触发事件。

＆＃13;

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

＆＃13;

.dropdown-content {
  display: none;
}

.container {
  background: #eee;
}

＆＃13;

<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>

＆＃13;

Answer 2

我有同样的问题，因为我没有将jquery包含在html中。

<script type="text/javascript" src="scripts/libs/jquery/jquery-1.8.2.min.js"></script>

确保你的HTML中有这个。

Answer 3

你忘了包含jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

将此行添加到页面按钮。它有效。

导航栏上的Jquery下拉列表无法正常工作

3 个答案: