jQuery 悬停下拉菜单 - 一旦您将鼠标悬停在父 div 之外，下拉菜单就会消失。如何避免这种情况答案

【问题标题】：jQuery hover dropdown menu- dropdowns disappear as soon as you hover away from parent div. how to avoid thisjQuery 悬停下拉菜单 - 一旦您将鼠标悬停在父 div 之外，下拉菜单就会消失。如何避免这种情况
【发布时间】：2017-12-11 18:02:37
【问题描述】：

进度和问题（办公室下拉菜单）：jsfiddleLink

代码：

    $(function() {
    $('#dropbutton').hover(function(e) {
    $('#myDropdown').toggle();
  });
});

如何捕获外部悬停或仅在子下拉元素中保留 div 的显示。谢谢！

【问题讨论】：

最好使用无序列表和嵌套的子列表来构造它。那时不需要 JS。
只需使用.hover() 方法指定的选择器范围添加下拉元素选择器，如下所示：jsfiddle.net/r78tpqch/5

标签： javascript jquery html css drop-down-menu

【解决方案1】：

不需要 js，只需添加这个 css 代码：

.dropdown:hover .dropdown-content{
  display: block;
}

当您将鼠标悬停在父级（dropdown）上时，这将显示 dropdown-content

见 sn-p：

.dropbtn {
  background-color: gray;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 19.5%;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: black;
  outline: 0;
  /*invalid
  text-style: bold;*/
}

.dropdown {
  position: relative;
  display: inline-block;
}




.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  overflow: auto;
  left: 0;
  right: 4px;
  z-index: 1;
  margin-top: 2px;
  font-size: 16px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  background-color: gray;
  color: white;
  margin-bottom: 2px;
  text-align: center;
}

.dropdown a:hover {
  background-color: black;
}

.show {
  display: block;
}

.dropdown:hover .dropdown-content{
  display: block;
}

<div class="navItem" style="display:inline">
<button class="dropbtn"> Home </button>
</div>

<div class="navItem dropdown" style="display:inline">
<button onclick="myFunction()" class="dropbtn" id="dropbutton">Offices</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="https://www.google.com" target="_blank">Regional</a>
    <a href="https://www.microsoft.com" target="_blank">Global</a>
    <a href="https://www.apple.com" target="_blank">Local</a>
  </div>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn"> Who we are</button>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn"> Contact </button>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn" id="searchBox"> Search </button>
</div>

<p>
  Page content goes here. As you click on dropdown or anything, this text remains here. You can try clicking on the Office dropdown on the menu above.
</p>

【讨论】：

该死！谢谢，我的朋友。这样一个简单而强大的解决方案就在那里。欣赏它。
顺便说一句，如果不使用按钮标签，我将如何做到这一点？ CSS 被低估了..
试过了，我想我把它杀了很久。 jsfiddle.net/zigzag/ndq5d94g 想法？顺便说一句，我试图避免使用按钮的原因是因为在按钮周围放置链接看起来像 PITA。
不错。关闭..我如何让它均匀分布并让下拉项目像这样均匀流动：jsfiddle.net/zigzag/qve06wjf
该死。当天的圣人！谢了哥们。最后一个问题 - 你知道办公室和第一个名为区域的下拉菜单之间的小部分......如果你逐渐将悬停光标移动到那里，下拉菜单就会消失。我认为在技术上是正确的，但您通常如何避免这种情况？

【解决方案2】：

您可以用 CSS 完全替换 jQuery。

首先你需要添加：

#dropbutton:hover + .dropdown-content,
.dropdown-content:hover {
display: block;
}

这将打开/关闭菜单。

我还将菜单上的margins 替换为border-bottom：

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  background-color: gray;
  color: white;
  text-align: center;
  border-bottom: 2px solid #fff;
}

.dropdown-content a:nth-child(1) {
  border-top: 2px solid #fff;
}

这是一个完整的例子：

.dropbtn {
  background-color: gray;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width: 19.5%;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: black;
  outline: 0;
  /*invalid
  text-style: bold;*/
}

.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  overflow: auto;
  left: 0;
  right: 4px;
  z-index: 1;
  font-size: 16px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  background-color: gray;
  color: white;
  text-align: center;
  border-bottom: 2px solid #fff;
}

.dropdown-content a:nth-child(1) {
  border-top: 2px solid #fff;
}

.dropdown a:hover {
  background-color: black;
}

.show {
  display: block;
}

#dropbutton:hover + .dropdown-content,
.dropdown-content:hover {
display: block;
}

<div class="navItem" style="display:inline">
<button class="dropbtn"> Home </button>
</div>

<div class="navItem dropdown" style="display:inline">
<button onclick="myFunction()" class="dropbtn" id="dropbutton">Offices</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="https://www.google.com" target="_blank">Regional</a>
    <a href="https://www.microsoft.com" target="_blank">Global</a>
    <a href="https://www.apple.com" target="_blank">Local</a>
  </div>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn"> Who we are</button>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn"> Contact </button>
</div>

<div class="navItem" style="display:inline">
<button class="dropbtn" id="searchBox"> Search </button>
</div>

<p>
  Page content goes here. As you click on dropdown or anything, this text remains here. You can try clicking on the Office dropdown on the menu above.
</p>

【讨论】：

感谢您的评论、回答和完整代码。欣赏它