Question

我有一个下拉菜单，其中包含display: none，当它悬停在父级上时，它通过CSS有display: block。下拉菜单链接到同一页面上的锚点，所以当我点击时我希望下拉列表消失，所以我点击了

$('.dropdown-menu').css("display", "none")

但是，jquery现在已经覆盖了悬停时发生的display: block。如何在单击时隐藏菜单时保留以前的功能？

Answer 1

您是否尝试过来自jquery的.hover()？

Answer 2

将此添加到您的javascript中

$(document).on('mouseover', '.dropdown', function(event) {
    $('.dropdown-content').css("display","block");
});

Answer 3

我添加了另一个功能来再次显示内容并稍微编辑了原文。

https://jsfiddle.net/dc38u09p/6/

$(document).on('click', 'a.hide-on-click', function(event) {
    $('.dropdown-content').hide();
});

$('.dropdown').on('mouseenter', function(){
    $('.dropdown-content').show();
});

Answer 4

最好使用jQuery进行悬停和点击操作。

这是快速解决方案：

＆＃13;

// menu hover
$(".dropdown").mouseover(function() {
    $('.dropdown-content').css("display", "block");
  })
  .mouseout(function() {
    $('.dropdown-content').css("display", "none");
  });
//menu click
$(".dropdown").click(function() {
  $('.dropdown-content').css("display", "none");
});

＆＃13;

/* Dropdown Button */

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

＆＃13;

在jquery设置css以显示无后，悬停下拉菜单显示不起作用

4 个答案: