单击展开的部分并展开其他部分时会折叠

Question

我已附上代码。当我们打开/扩展其他部分时，该部分将折叠。但是，当我们单击打开的按钮时，该部分不会折叠。 我想在两种情况下实现本节的折叠：  单击打开的按钮以及单击其他部分时折叠

请对此提供帮助。预先感谢

var coll = document.getElementsByClassName("collapsible");

for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    // before opening the accordion, you close everything
    for (var j = 0; j < coll.length; j++) {
      coll[j].classList.remove("active");
      coll[j].nextElementSibling.style.maxHeight = null;
    }
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

.centered {
  position: absolute;
  margin-top:30px;
  left: 13%;
  color:white;
  font-weight: bold;
  font-size:35px;
  height:auto;
  display:inline-block;
}

@media (max-width: 1030px) {
  .centered {
    float: none;
    display: block;
    text-align: left;
    }
  
 #container {
  display:flex;
  margin-left:50px;
  align-items: center;
}  
}

.column {
  padding: 30px;
  height: 200px; 
  margin: -20px;
  width: 430px;
  height: 120px;
  border-radius: 10px;
  display: inline-block;
  border: 2px #e6e6e6;
  padding-left: 48px;
 }
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 10px;
  height:55px;

}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  margin-top: -30px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 40px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  margin:0px;
}

#container {
  display:flex;
  margin-left:10px;
  align-items: center;
  margin-top:-12px;
}
#container > * {
  margin-right: 15px;
}
.maincontainer{
  margin: auto;
  width: 90%;
  margin-top:-20px;
}
.card-heading{
  word-wrap: break-word;
  margin-left: 10px;
    margin-top: 11px;
}
h4{
 font-family: Verdana,sans-serif;
 font-size: 13px;
 line-height: 1.5;
}
h2{
 font-family: Verdana,sans-serif; 
 text-align:center;
 font-size:20px;
}
.sub-container{
  font-size: 20px; 
  font-family: 'Open Sans',sans-serif;

}

<div class="maincontainer">

<div class="collapsible">
  <span id="container">
      <img src="test.png" width="45" height="45" alt="">
      <span class="sub-container">Heading</span>
  </span>
</div>
<div class="content">
  <div class="sub-heading">
  <h2>Heading</h2>
</div>
 <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div>
<div class="sub-heading">
  <h2>Heading</h2>
</div>
</div>
   <div class="column">
    <div class="row">
    <div><img src="test" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

  

</div>

<div class="collapsible">
  <span id="container">
      <img src="test.png" width="45" height="45" alt="">
      <span class="sub-container">Heading</span>
  </span>
</div>
<div class="content">
 <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div>
<div class="sub-heading">
  <h2>Heading</h2>
</div>
</div>
   <div class="column">
    <div class="row">
    <div><img src="test" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

  
</div>
 


<div class="collapsible">
  <span id="container">
      <img src="test.png" width="45" height="45" alt="">
      <span class="sub-container">Heading</span>
  </span>
</div>

<div class="content">
  <div class="sub-heading">
  <h2>Heading</h2>
</div>

<div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div class="column">
    <div class="row">
    <div><img src="test.png" width="45" height="40" style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

   <div>
<div class="sub-heading">
  <h2>Heading</h2>
</div>
</div>
   <div class="column">
    <div class="row">
    <div><img src="test" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>

    <div class="column">
    <div class="row">
    <div><img src="test.png" width="40" height="40"  style="float: left;"/></div>
   <div class="card-heading"><h4>TEXT</h4></div>
    </div>
   </div>
</div>
 </div>

Answer 1

在函数开始时，检查classList中是否为“ active”：

var isActive = this.classList.contains("active"); 

然后，如果isActive

，则关闭所有内容后退出函数

if (isActive) return;

当您单击一个打开的部分时，它将是唯一的一个部分，因为您确保始终有最多一个打开的部分。

Answer 2

var col1 = document.getElementsByClassName('collapsible');
let lastClick;
let content;

[...col1].forEach(col => {
  col.addEventListener('click', function() {
    // Check if last clicked ele is same as current and it has 'active' class
    if (this == lastClick && this.classList.contains('active')) {
      this.classList.remove('active');
      content.style.maxHeight = null;
      return;
    }
    // Remove active class from all elements along with maxheight to null
    [...col1].forEach(col => {
      col.classList.remove('active')
      col.nextElementSibling.style.maxHeight = null;
    });
    
    // Add active to clicked element and apply the height to the next element sibling.
    this.classList.add('active');
    content = this.nextElementSibling;
    content.style.maxHeight = content.scrollHeight + "px";
    lastClick = this;
  });
})

.centered {
  position: absolute;
  margin-top: 30px;
  left: 13%;
  color: white;
  font-weight: bold;
  font-size: 35px;
  height: auto;
  display: inline-block;
}

@media (max-width: 1030px) {
  .centered {
    float: none;
    display: block;
    text-align: left;
  }
  #container {
    display: flex;
    margin-left: 50px;
    align-items: center;
  }
}

.column {
  padding: 30px;
  height: 200px;
  margin: -20px;
  width: 430px;
  height: 120px;
  border-radius: 10px;
  display: inline-block;
  border: 2px #e6e6e6;
  padding-left: 48px;
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-top: 10px;
  height: 55px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  margin-top: -30px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 40px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  margin: 0px;
}

#container {
  display: flex;
  margin-left: 10px;
  align-items: center;
  margin-top: -12px;
}

#container>* {
  margin-right: 15px;
}

.maincontainer {
  margin: auto;
  width: 90%;
  margin-top: -20px;
}

.card-heading {
  word-wrap: break-word;
  margin-left: 10px;
  margin-top: 11px;
}

h4 {
  font-family: Verdana, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

h2 {
  font-family: Verdana, sans-serif;
  text-align: center;
  font-size: 20px;
}

.sub-container {
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
}

<div class="maincontainer">

  <div class="collapsible">
    <span id="container">
                <img src="test.png" width="45" height="45" alt="">
                <span class="sub-container">Heading</span>
    </span>
  </div>
  <div class="content">
    <div class="sub-heading">
      <h2>Heading</h2>
    </div>
    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div>
      <div class="sub-heading">
        <h2>Heading</h2>
      </div>
    </div>
    <div class="column">
      <div class="row">
        <div><img src="test" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>



  </div>

  <div class="collapsible">
    <span id="container">
                <img src="test.png" width="45" height="45" alt="">
                <span class="sub-container">Heading</span>
    </span>
  </div>
  <div class="content">
    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div>
      <div class="sub-heading">
        <h2>Heading</h2>
      </div>
    </div>
    <div class="column">
      <div class="row">
        <div><img src="test" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>


  </div>



  <div class="collapsible">
    <span id="container">
                <img src="test.png" width="45" height="45" alt="">
                <span class="sub-container">Heading</span>
    </span>
  </div>

  <div class="content">
    <div class="sub-heading">
      <h2>Heading</h2>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="45" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div>
      <div class="sub-heading">
        <h2>Heading</h2>
      </div>
    </div>
    <div class="column">
      <div class="row">
        <div><img src="test" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="row">
        <div><img src="test.png" width="40" height="40" style="float: left;" /></div>
        <div class="card-heading">
          <h4>TEXT</h4>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

我认为您在这里需要做很多工作，不需要遍历所有元素就可以先删除活动列表。您将只有1个活动类，因此查询该活动类，然后删除活动类，然后在完成后可以比较该活动类是否与刚刚单击的标题相同。如果是这样，您就已经完成了，因为您已经删除了active css类。

否则，您只需要添加active类，就可以完成。

一个过于简化的解决方案将是以下解决方案

document.querySelectorAll('.accordion > .panel').forEach( p => {
  p.addEventListener('click', function(e) {
    const { currentTarget } = e;
    const activePanel = document.querySelector('.active');
    
    // if there is an active panel, remove the active css class
    activePanel && activePanel.classList.remove('active');
    if (activePanel === currentTarget) {
      // if it's the current panel, we are done
      return;
    }
    // otherwise set the current target to active
    currentTarget.classList.add('active');
  } );
} );

.panel > .content {
  display: none;
  visibility: hidden;
}
.panel > h1 {
  background: #000;
  color: #fff;
}
.panel > h1:after {
  content: '+';
}
.panel.active > .content {
  display: block;
  visibility: visible;
}
.panel.active > h1 {
  background: #777;
  color: #000;
}
.panel.active > h1:after {
  content: '-';
}

<div class="accordion">
  <div class="panel">
    <h1>header</h1>
    <div class="content">
    Lorem ipsum...
    </div>
  </div>
  <div class="panel">
    <h1>header</h1>
    <div class="content">
    Lorem ipsum...
    </div>
  </div>
  <div class="panel">
    <h1>header</h1>
    <div class="content">
    Lorem ipsum...
    </div>
  </div>
</div>