jQuery hover下拉菜单 - 一旦你从父div中移开，下拉菜单就会消失。 如何避免这种情况

Question

进度和问题（办公室下拉列表）： jsfiddleLink

码：

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

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

Answer 1

不需要fo js，只需添加此css代码：

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

当您将鼠标悬停在父级上时，这将显示下拉内容 （ 下拉列表 ）

请参阅代码段：

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

Answer 2

你可以用CSS完全替换jQuery。

首先你需要添加：

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

这将打开/关闭菜单。

我还用border-bottom替换了菜单上的margins ：

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