单击时隐藏 Div

Question

我有一些 HTML/CSS/JQuery 下拉菜单可以工作。我的伪代码是：

function closeMenus() {
  $('.subMenu').css('display', 'none');
}

#mainMenu ul li .subMenu {
  display: none;
  position: absolute;
}
#mainMenu ul li:hover .subMenu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
  <ul>
    <li>
      Menu Header
      <div class="subMenu" onClick="closeMenus();">Menu Content</div>
    </li>
  </ul>
</div>

CSS 的工作原理是，当有人将鼠标悬停在菜单标题上时，子菜单会出现在其下方，并在鼠标离开菜单时消失。当用户单击菜单中的某个项目时，我的问题就出现了；我想隐藏菜单。 JavaScript 可以很好地隐藏菜单，但是当用户再次将鼠标悬停在菜单标题上时，它不会重新出现。 CSS 似乎不会覆盖 JavaScript 显示属性。大多数（如果不是全部）链接不会转到其他页面，而只是调用更多 JavaScript。

任何人都知道如何在单击时隐藏子菜单以便它再次可见，或者我是否需要更多的Javascript来在每次有人悬停时显示菜单？

Answer 1

更充分地使用 JQuery —— 查看 .toggle() 命令并通过单击绑定它：

$('.subMenu').click(function() {$(this).toggle();});

然后您可以消除大部分其他代码。

Answer 2

您尝试使用 CSS 完成一半，使用 jQuery 完成一半。只需使用 jQuery 即可完成这一切： http://jsfiddle.net/hw5qr/

$('.subMenu').click(function() {
    $(this).hide();
});

$('#mainMenu').hover(function() {
    $(this).find('.subMenu').show();
}, function() {
    $(this).find('.subMenu').hide();
});

Answer 3

Stryle 属性具有最高优先级。

$('.ftpBrowseSubMenu').css('display','none');

make

<div style="display:none">

，因此规则

#mainMenu ul li:hover 

相对于样式属性的优先级较低。所以，你必须用 javascript 来做所有事情。

Answer 4

就像你已经说过的，元素样式比 css 样式更强（除非你使用 !important）。所以你必须用 Javascript 来完成所有不应该太难的事情。您只需注册另外两个事件侦听器：onmouseover 和 onmouseout。使用它们，您可以将显示属性设置为正确的值，它将以这种方式工作。