javascript - 单击外部元素时隐藏元素？

问题描述

问题：

我知道检测元素外的点击有很多答案。
但是我现在不知道如何在此代码中发生在元素外部的单击时隐藏该元素。

设想：

在这段代码中，我向所有 li 元素添加了一个 click 函数。此函数显示子元素。
如何使用 for 循环来检测纯 javasctipt 外部的点击以隐藏元素。

let lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {
    if (lis[i].children.length > 0) {
    lis[i].addEventListener('click', function() {
      lis[i].children[0].style.display = 'block';
    });
  }
  }

 li, ul {
  width: max-content;
 }
ul > li > ul {
  display: none;
}

li {
  cursor: pointer;
}

<body>
<ul>
  <li>list</li>
  <li>list
    <ul>
      <li>list</li>
      <li>list</li>
    </ul>
  </li>
  <li>list
    <ul>
      <li>list</li>
      <li>list</li>
    </ul>
  </li>
</ul>
</body>

标签： javascript

使用下面的纯 JavaScript 代码将帮助您。

let lis = document.querySelectorAll('li');

document.getElementById("menuContainer").addEventListener("click", function(event){
  for (let i = 0; i < lis.length; i++) {
  if(lis[i].children[0]){
    lis[i].children[0].style.display = 'none';
    }
  }
  if(event.target.nodeName.toLowerCase() == "li" && event.target.children[0]){
    event.target.children[0].style.display = (event.target.children[0].style.display == 'block')?'none':'block';
  }
});

ul > li > ul {
  display: none;
}

li {
  cursor: pointer;
}

<body>
<ul id="menuContainer">
  <li>list</li>
  <li>list
    <ul>
      <li>list</li>
      <li>list</li>
    </ul>
  </li>
  <li>list
    <ul>
      <li>list</li>
      <li>list</li>
    </ul>
  </li>
</ul>
</body>

- 谢谢

javascript - 单击外部元素时隐藏元素？

问题描述

解决方案

推荐阅读