如何隱藏動態點擊外部的子元素？

Question

我可以通過向每個子元素添加以下代碼來隱藏子元素：

window.addEventListener('mouseup', function(event){
let children = parent[0].children[0]
if (event.target != children && event.target.parentNode != children){
    children.style.display = 'none';
  }
});

但是如何隱藏子ul元素而不在子ul元素（帶有for循環或其他內容）外部單擊而又不向每個子元素添加此代碼呢？

在這段代碼中，我在單擊父li元素時顯示了子ul元素

 var parent = document.querySelectorAll('body > ul > li'); parent[0].addEventListener('click', function () { parent[0].children[0].style.display = 'block'; }); parent[1].addEventListener('click', function () { parent[1].children[0].style.display = 'block'; }); parent[2].addEventListener('click', function () { parent[2].children[0].style.display = 'block'; }); window.addEventListener('mouseup', function(event){ let children = parent[0].children[0] if (event.target != children && event.target.parentNode != children){ children.style.display = 'none'; } }); 

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

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

謝謝

Answer 1

如果我理解您的問題：用戶單擊任何子元素，則子狀態（隱藏）不應有任何變化。 您可以使用以下代碼（我假設您僅使用ES5）。 如果要在父級單擊上隱藏子元素，請刪除isParentClick()方法。

  var parent = document.querySelectorAll('body > ul > li'); var len = parent.length; for(var i=0;i<len;i++){ parent[i].addEventListener('click', function (event) { if(event.target !== event.currentTarget.children[0].children[0]){ if(event.currentTarget.children[0].style.display === 'block'){ event.currentTarget.children[0].style.display = 'none'; } else { event.currentTarget.children[0].style.display = 'block'; } } }); } window.addEventListener('mouseup', function(event){ if(isParentClick()){ return false; } if(isChildClick(event)){ return false; } for(var i=0;i<len;i++){ parent[i].children[0].style.display = 'none'; } }); function isParentClick(){ for(var i=0;i<len;i++){ if(parent[i] === event.target){ return true; } } return false; } function isChildClick(event){ for(var i=0;i<len;i++){ if(parent[i].children[0].children[0] === event.target){ return true; } } return false; } 

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

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

Answer 2

您可以使用document.querySelectorAll而不是定位單個元素。由於要顯示子項，因此單擊將位於li因此再次執行querySelector並選擇ul並添加樣式。

注意使用stopPropagation 。有連接到另一個事件body ，使任何點擊body將隱藏的孩子。 stopPropagation的用途是防止事件bubling階段，單擊li和單擊body兩者將同時發生。

身體以紅色邊框

 var parent = document.querySelectorAll('body > ul > li'); parent.forEach(function(item) { item.addEventListener('click', function(e) { e.stopPropagation() item.querySelector('ul').style.display = 'block'; }) document.body.addEventListener('click', function(e) { document.querySelectorAll('.parent').forEach(function(item) { item.querySelector('ul').style.display = 'none' }) }) }) 

 ul>li>ul { display: none; } ul, li { width: max-content; } body { border: 1px solid red; } 

 <ul> <li class='parent'>parent1 <ul> <li>child1</li> </ul> </li> <li class='parent'>parent2 <ul> <li>child2</li> </ul> </li> <li class='parent'>parent3 <ul> <li>child3</li> </ul> </li> </ul>