javascript - jQuery下拉列表导航栏不起作用

原文 标签 javascript jquery css

我有以下下拉代码:



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





但是,当我将鼠标悬停在dropdown-content上时,它收缩了,好像dropdown-content不是li类“ dropdown”的一部分,在li类中“ jquery”触发了向上滑动。我如何才能使下拉菜单内容仅在鼠标离开导航元素或下拉菜单内容时才向上滑动?

最佳答案

如果添加容器,则可以确保仅针对整个项目触发事件。此外,使用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>

关于javascript - jQuery下拉列表导航栏不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42800391/

相关文章:

javascript - 无论if语句如何,都将加载Ajax内容

jquery - 更改按钮的href并转到下一页

html - 在div中居中放置图像而不裁剪图像并 overflow hidden

javascript - 页面打开时菜单打开(下拉)

javascript - 在 react 中,我如何强制浏览器要求保存密码?

php - 用于评级 html5 js 的圆形 div 栏

javascript - 如何在页面加载/使用 Javascript 时自动打开仅 CSS 弹出窗口?

javascript - 获取 Ruby Opal 代码中的错误行

javascript - 我的jquery验证问题添加了方法密码规则

javascript - Node server.js-无法获取/