e.querySelector在单击父级时未获取子级元素

时间：2018-09-23 09:56:41

标签： javascript html css

我正在尝试列出项目，每个项目也可能有子项目。我希望默认情况下隐藏子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')以获取项目列表并切换其隐藏类。

2 个答案:

答案 0 :(得分：4)

您需要使用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>

答案 1 :(得分：1)

  1. 它是Window_Closing而不是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;
}

相关问题
最新问题