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（）命令并通过click：

绑定它

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

然后你可以删除大部分其他代码。

Answer 2

Stryle属性具有最高优先级。

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

制作

<div style="display:none">

，所以规则

#mainMenu ul li:hover

对style属性的优先级较低。所以，你必须用javascript做所有事情。

Answer 3

就像你已经说过的元素样式强于css样式（除非你使用！important）。所以你必须用Javascript来做所有事情，这应该是很难的。您只需注册两个事件侦听器：onmouseover和onmouseout。使用它们，您可以将display属性设置为正确的值，它将以这种方式工作。

Answer 4

你试图用CSS做一半，用jQuery做一半。用jQuery完成所有操作：http://jsfiddle.net/hw5qr/

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

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

单击时隐藏Div

4 个答案: