e.querySelector在單擊父元素時未獲取子元素

Question

我正在嘗試制作一個項目列表，每個項目也可能包含子項目。 我希望默認情況下隱藏孩子ul，然后當我點擊父元素時，我可以切換一個類使其顯示或消失。

這是我的代碼到目前為止的樣子：

 function selectHeader(e){ e.children[0].classList.toggle("collapse") e.children[0].classList.toggle("expand") e.querySelector('.items')[0].classList.toggle('hidden') } 

 *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ margin-left: 10px; margin-top: 10px; } .tile img{ width: 300px; height: auto; display: block; } .tile { width: 300px; display: inline-block; position: relative; border-radius: 10px; margin-right: 10px; margin-bottom: 10px; transition: 0; max-height: 300px; overflow: hidden; } .details { position: absolute; top: 0; left: 0; opacity: 0; width: 300px; background-color: #e74c3c; transition: 0.5s ease; max-height: 300px; min-height: 300px; } .tile:hover .details { opacity: 0.9; overflow: auto; } /* Front Area */ .tile:hover .tileName { display: none; } .front{ position: relative; } .tileName{ background: #e74c3c; opacity: 0.7; position: absolute; top: 0; width: 100%; height: 50px; } .tileName h3{ color: white; margin: 0 auto; width: 50%; text-align: center; margin-top: 10px; } /* Headers */ ul{ padding: 0px; } ul.headers, ul.headers a{ color: white; } ul.headers > li{ background: #bdc3c7; width: 100%; margin: 0px; padding: 10px; color: red; border-bottom: 1px solid white; cursor: pointer; } ul.headers > li:hover { color: white } .expand{ font-weight: bold; font-size: 16px; } .header > .expand:before{ content: '\\22CE'; } .header > .collapse:before{ content: '\\22CF'; } /* Items */ ul.items{ transition: 1s; } ul.items.hidden{ display: none; } 

 <div class="container"> <div class="tile"> <div class="front"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" /> <div class="tileName"> <h3>Sports</h3> </div> </div> <div class="details"> <ul class="headers"> <li onclick="selectHeader(this)" class="header"><span class="expand"></span> <span class="headerName">header 1</span> <a href="#"></a> <ul class="items hidden"> <li class="item ">ite1</li> <li class="item">ite1</li> <li class="item">ite1</li> </ul> </li> <li onclick="selectHeader(this)" class="header"><span class="expand"></span> <span class="headerName">header 1</span> <a href="#" </a> <ul class="items hidden"> <li class="item ">ite1</li> <li class="item">ite1</li> <li class="item">ite1</li> </ul> </li> </ul> </div> </div> <div class="tile"> <div class="front"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar"> </div> <div class="details"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyW <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guy</p> <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guy</p> <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guy</p> e love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guy</p> </div> </div> </div> 

我想要做的是切換默認存在的類“expand”，並切換類“collapse”以顯示展開/折疊圖標，同時切換隱藏在內部ul上的類。 切換擴展/折疊的跨度工作（不確定是否有更好的方法），但我無法使用： e.querySelector('.items')[0].classList.toggle('hidden')單擊標題時，獲取項目列表並切換其隱藏的類。

Answer 1

您需要使用e.querySelectorAll('.items')[0]或e.querySelector('.items') 。 第一個將返回元素的集合，第二個將返回一個元素。

 function selectHeader(e){ e.children[0].classList.toggle("collapse") e.children[0].classList.toggle("expand") e.querySelectorAll('.items')[0].classList.toggle('hidden') } 

 *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ margin-left: 10px; margin-top: 10px; } .tile img{ width: 300px; height: auto; display: block; } .tile { width: 300px; display: inline-block; position: relative; border-radius: 10px; margin-right: 10px; margin-bottom: 10px; transition: 0; max-height: 300px; overflow: hidden; } .details { position: absolute; top: 0; left: 0; opacity: 0; width: 300px; background-color: #e74c3c; transition: 0.5s ease; max-height: 300px; min-height: 300px; } .tile:hover .details { opacity: 0.9; overflow: auto; } /* Front Area */ .tile:hover .tileName { display: none; } .front{ position: relative; } .tileName{ background: #e74c3c; opacity: 0.7; position: absolute; top: 0; width: 100%; height: 50px; } .tileName h3{ color: white; margin: 0 auto; width: 50%; text-align: center; margin-top: 10px; } /* Headers */ ul{ padding: 0px; } ul.headers, ul.headers a{ color: white; } ul.headers > li{ background: #bdc3c7; width: 100%; margin: 0px; padding: 10px; color: red; border-bottom: 1px solid white; cursor: pointer; } ul.headers > li:hover { color: white } .expand{ font-weight: bold; font-size: 16px; } .header > .expand:before{ content: '\\22CE'; } .header > .collapse:before{ content: '\\22CF'; } /* Items */ ul.items{ transition: 1s; } ul.items.hidden{ display: none; } 

 <div class="container"> <div class="tile"> <div class="front"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" /> <div class="tileName"> <h3>Sports</h3> </div> </div> <div class="details"> <ul class="headers"> <li onclick="selectHeader(this)" class="header"><span class="expand"></span> <span class="headerName">header 1</span> <a href="#"></a> <ul class="items hidden"> <li class="item ">ite1</li> <li class="item">ite1</li> <li class="item">ite1</li> </ul> </li> <li onclick="selectHeader(this)" class="header"><span class="expand"></span> <span class="headerName">header 1</span> <a href="#"> </a> <ul class="items hidden"> <li class="item ">ite1</li> <li class="item">ite1</li> <li class="item">ite1</li> </ul> </li> </ul> </div> </div> <div class="tile"> <div class="front"> <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar"> </div> <div class="details"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyW <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guy</p> <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guy</p> <p>We love that guy, We love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guy</p> e love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guyWe love that guy</p> </div> </div> </div> 

Answer 2

1. 它的querySelectorAll不是querySelector 。 你也有一個未公開的<a>標簽。

 function selectHeader(e){ e.children[0].classList.toggle("collapse") e.children[0].classList.toggle("expand") e.querySelectorAll('.items')[0].classList.toggle('hidden') } 

 *{ margin: 0; padding: 0; box-sizing: border-box; } .container{ margin-left: 10px; margin-top: 10px; } .tile img{ width: 300px; height: auto; display: block; } .tile { width: 300px; display: inline-block; position: relative; border-radius: 10px; margin-right: 10px; margin-bottom: 10px; transition: 0; max-height: 300px; overflow: hidden; } .details { position: absolute; top: 0; left: 0; opacity: 0; width: 300px; background-color: #e74c3c; transition: 0.5s ease; max-height: 300px; min-height: 300px; } .tile:hover .details { opacity: 0.9; overflow: auto; } /* Front Area */ .tile:hover .tileName { display: none; } .front{ position: relative; } .tileName{ background: #e74c3c; opacity: 0.7; position: absolute; top: 0; width: 100%; height: 50px; } .tileName h3{ color: white; margin: 0 auto; width: 50%; text-align: center; margin-top: 10px; } /* Headers */ ul{ padding: 0px; } ul.headers, ul.headers a{ color: white; } ul.headers > li{ background: #bdc3c7; width: 100%; margin: 0px; padding: 10px; color: red; border-bottom: 1px solid white; cursor: pointer; } ul.headers > li:hover { color: white } .expand{ font-weight: bold; font-size: 16px; } .header > .expand:before{ content: '\\22CE'; } .header > .collapse:before{ content: '\\22CF'; } /* Items */ ul.items{ transition: 1s; display:block; } ul.items.hidden{ display: none; } 

  <ul><li onclick="selectHeader(this)" class="header"><span class="expand"></span> <span class="headerName">header 1</span> <a href="#"></a> <ul class="items hidden"> <li class="item ">ite1</li> <li class="item">ite1</li> <li class="item">ite1</li> </ul> </li> </ul>