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