用于关闭菜单的 jQuery.最接近的纯 JavaScript 解决方案

Question

我有一段代码可以关闭下拉菜单，如果您在文档上单击打开的菜单本身以外的某个位置。我想摆脱jQuery，但我不确定如何将这段代码翻译成纯javascript。

     $(document).ready(function() {
       $(document).click(function(event) {
         if (!$(event.target).closest('li.main').length) {
           if ($('li.main').is(":visible")) {
             $('#dropdown').hide();
           }
         }
       })
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="main" onclick="ToggleMainMenu();"><span>All categories</span>
  </li>
  <li> <a href="/item1">Item 1</a> 
  </li>
  <li> <a href="/item2">Item 2</a> 
  </li>
  <li> <a href="/item3">Item 3</a> 
  </li>
</ul>

Answer 1

您的点击处理程序正在执行以下操作：

if ( clicked object is a descendent of "li.main" AND "li.main" is visible)
    hide "#dropdown"

如果您将 onclick 属性添加到节点"li.main"或其后代之一 - 就像您在注释中添加 ToggleMainMenu 一样 - 那么您保证：- 点击的项目是"li.main"或"li.main"的后代- "li.main"是可见的（因为您无法单击不可见的项目）

此时，您不再需要比较，只需在 ToggleMainMenu 函数的主体中隐藏"#dropdown"。从javascript隐藏/显示元素复制：

document.getElementById("dropdown").style.display = "none";

附言为了简洁起见，我使用了jquery选择器表示法

Answer 2

有时它比你想象的要容易。我找到了一个解决方案：

document.addEventListener("DOMContentLoaded", function (event) {
    document.addEventListener('click', function (e) {
        var mainMenu = document.getElementById('main');
        if (!mainMenu.contains(e.target)) {
            document.getElementById('dropdown').style.display = 'none';
        }
    }, false);
});

我不知道contains.