使用 CSS 或 JavaScript 在外部单击时如何关闭 CSS 菜单

Question

我在使用 CSS 创建的网页上有一个下拉菜单。将鼠标悬停在项目上时，它会下拉子菜单。它在我的 PC 上运行良好，但在触摸屏上单击菜单外时无法关闭菜单。我找不到让触摸屏识别我不再点击菜单的方法。

所以基本上我需要触发一个触发器来告诉菜单在我触摸菜单外的任何位置时关闭。

我想我需要某种 Javascript 或 JQuery 触发器。我不知道如何简单地使用 CSS 来做到这一点。

如果您想查看它，我可以包含菜单的 CSS，但这只是创建菜单。我需要一些可以关闭菜单并且不在 CSS 中的东西。

编辑：

到目前为止，这是唯一有效的方法，但是如果它在菜单上，我怎么能告诉它忽略触摸呢？

$(document).bind('touchstart', function(event) {
      event.preventDefault();                  
      var target = event.target;
      target = $(this);
      alert("touched");
    });

HTML

<div id="menu">
  <ul id="nav">
    <li class="taphover"><a href="#">Tools</a>
      <ul>
        <li><a href="#">Change Password</a></li>
      </ul>
    </li>    

Answer 1

当您在外部单击时关闭某些内容的一种相当常见的方法是将单击处理程序附加到正文。当该事件被触发时，您检查它是否不是您的下拉菜单，然后隐藏/关闭它。

示例

$('body').click(function() {
   // Check here is dropdown and close if not
});