Question

我有一段关闭下拉菜单的代码，如果您单击文档而不是打开的菜单本身。我想摆脱jQuery，但我不确定如何将此代码转换为纯javascript。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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 hide/show element复制：

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

P.S。为简洁起见，我使用了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。

用于关闭菜单的jQuery.closest的纯JavaScript解决方案

2 个答案: