Question

问题：

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

场景：

在这段代码中，我向所有li元素添加了一个click函数。该功能显示子元素。
如何通过纯净的方式检测到外部点击 javasctipt使用for循环隐藏元素。

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>

Answer 1

使用纯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>

-谢谢

Answer 2

您可以使用以下命令更新脚本：

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

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

Answer 3

此解决方案对我有帮助。

let lis = document.querySelectorAll('li');

for (let i = 0; i < lis.length; i++) {
    if (lis[i].children.length > 0) {
    lis[i].addEventListener('click', function(e) {
    e.stopPropagation();
      lis[i].children[0].style.display = 'block';
    });
  }
  }
  
  window.addEventListener('click', function() {
    document.querySelectorAll('body > ul > li').forEach(function(item) {
      item.querySelector('ul').style.display = 'none'
    })
  })

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

<body>
<ul>
  <li>parent1
    <ul>
      <li>child1</li>
    </ul>
  </li>
  <li>parent2
    <ul>
      <li>child2</li>
    </ul>
  </li>
  <li>parent3
    <ul>
      <li>child3</li>
    </ul>
  </li>
</ul>
</body>

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

3 个答案: