jquery将css设置为不显示后，悬停时显示的下拉菜单不起作用答案

【问题标题】：Dropdown menu show on hover doesn't work after jquery sets css to display nonejquery将css设置为不显示后，悬停时显示的下拉菜单不起作用
【发布时间】：2017-07-24 16:08:45
【问题描述】：

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

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

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

JSFiddle of my code

【问题讨论】：

无论你做了什么，都可以显示代码吗？
放出html+js+css获取答案
您的 JS 覆盖了您的 CSS，因为它将 CSS 属性内联。您可以通过在 CSS 文件中将 !important 添加到悬停状态或在 JS 中进行悬停效果来解决此问题。
更正：!important 将不起作用，因为那样您无法在单击时隐藏菜单，因此您唯一的选择是在 JS 中进行悬停。

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

【解决方案1】：

我添加了另一个功能来再次显示内容并稍微修改了您的原始内容。

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

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

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

【讨论】：

【解决方案2】：

你试过 jquery 中的.hover() 吗？

【讨论】：

您应该将其添加为评论而不是答案。

【解决方案3】：

将此添加到您的 javascript 中

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

【讨论】：

【解决方案4】：

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

这是快速解决方案：

// 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");
});

/* 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;
}

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

【讨论】：