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

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

因此，基本上我需要触发一个触发器，当我触摸菜单外的任何屏幕时，它会告诉菜单关闭

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

如果你想看的话，我可以在菜单中加入CSS，但这只会创建菜单。我需要的东西，关闭菜单，而不是在CSS

编辑：

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

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

HTML

在外部单击时关闭某个对象的一种相当常见的方法是将单击处理程序附加到主体上。当触发该事件时，请检查该事件是否不是您的下拉列表，然后隐藏/关闭它

示例

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

---

@事实上，有一种“更好”的方法（比你链接中被接受的答案）来处理这个问题。这里有一篇关于这个主题的文章：如果可能的话，可以发布

html

，

css

，

js

？在（“touchmove”，fn）上尝试了jquery

。

？请看@demrks，您的链接在PC上工作，但同样，不是在iPad上。如果我触摸身体上的任何地方，下拉菜单不会关闭。请执行所有这些示例所建议的完全相同的操作，但使用

touchstart

事件，而不是

click

。问题是在移动设备上点击启动，而不是启动页面缩放或平移手势。我会让“单击”事件的父菜单切换子菜单可见性。谢谢Colin，但移动设备（iPad）无法识别主体。单击事件。

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