javascript 我需要把这些可折叠的纽扣做成高地人

我有3个可折叠的按钮，但你可以让他们在同一时间都打开，我一直在寻找一种方法，使他们相互排斥，所以当你打开一个，如果有另一个打开它关闭。
这是我的按钮使用的代码，我需要知道如何保持只有一个开放的时间

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

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

.informacion {
  margin-top: 40px;
  margin-bottom: 10px;
  margin-left: 200px;
  margin-right: 190px;
  display: flex;
}

/*button:nth-child(1) {
  background-image: url("https://cdn.shopify.com/s/files/1/0631/2886/2962/files/01.jpg?v=1690838660");
  color: #fff;
}

button:nth-child(3) {
  background-image: url("https://cdn.shopify.com/s/files/1/0631/2886/2962/files/02.jpg?v=1690838660");
  color: #fff;
}*/

@media screen and (min-width: 1400px) {
  .informacion {
    margin-left: -70px;
  }

}

.collapsible {
  background-color: rgba(250, 206, 205, 0.6);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  cursor: pointer;
  /*padding: 18px;*/
  padding: 10px 20px 10px 20px; /*en odern; top, right, bottom, left*/
  width: 800px;
  outline: none;
  border-radius: 50px 50px 50px 50px;
  border: solid #facecd 5px;
  flex-grow: 2;
}

.collapsible {
  height: 60px;
  margin-right: -60px;
  font-family: 'Axiforma';
  font-weight: 300;
  font-size: 20px;
  text-align: center;
  letter-spacing: 7px;
  text-shadow: 2px 2px 8px #000;
}

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

/*.collapsible:after {
  content: '\002B';
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

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

.content {
  position: relative;
  top: 60px;
  right: 70px;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #fde2e2;
  border-radius: 40px 40px 40px 40px;
  font-size: 17px;
  line-height: 25px;
}

.content p {
  /*margin-left: 100px;*/
  font-family: 'Axiforma';
  font-weight: 400;
  margin-top: 20px;
  padding-bottom: 10px;
}

.content li {
  margin-left: 100px;
}

<div class="informacion">
  <button class="collapsible">ABOUT US</button>
  <div class="content">
    <p>Maria Cecilia Sparacio, the founder of The Pink Room Shapewear (Family business), hails from Cali, Colombia. After studying law and working as a bank manager in Bogota, Colombia, Maria arrived in the United States in 2001. Initially planning for a temporary stay to improve her English skills on a student visa, she was captivated by the opportunities this country had to offer, leading her to pursue the American dream.</p>
  </div>

  <button class="collapsible">F.A.Q</button>
  <div class="content">
    <p>We have compiled a comprehensive list of questions and answers to provide you with the information you need about our shape-wear products and services.
      Whether you're curious about the types of shape-wear we offer, how to choose the right size, or our return policy, you'll find the answers <a href="https://inthepinkroom.com/pages/frequently-asked-questions">here.</a></p>
  </div>

  <button class="collapsible">LOCATIONS</button>
  <div class="content">
    <p>You can find us at
      <ul>
        <li>249 Morris Avenue, Elizabeth New Jersey 07208, United States</li>
        <li>1994 Morris Avenue, Union New Jersey 07083, United States</li>
      </ul>
    </p>
  </div>
</div>

有一种规范的方法可以一次只打开一个按钮区域。首先，为组中的所有按钮指定相同的类。然后，将以下eventListener添加到所有这些事件

var action = (e) => {
  document.querySelector(".btnGroup ~ DIV").forEach(function(elem) {
    elem.style.display = "none";
  });
  e.target.nextElementSibling.style.display = "block")
}

document.querySelector(".btnGroup").forEach((elem) => elem.addEventListener("click", action);

字符串

var action = (e) => {
  document.querySelectorAll(".btnGroup ~ DIV").forEach( (elem) => {
    elem.style.display = "none";
  });
//  e.target.querySelector("~DIV").style.display = "block";
  var elem = e.target;
  while (elem.tagName != "DIV") {
    elem = elem.nextElementSibling;
  }
  elem.style.display = "block";
}

document.querySelectorAll(".btnGroup").forEach((elem) => elem.addEventListener("click", action)
);

<button class="btnGroup">A</button>
<div>abc</div>
<button class="btnGroup">B</button>
<div>def</div>
<button class="btnGroup">C</button>
<div>ghi</div>

的数据

javascript 我需要把这些可折叠的纽扣做成高地人

1条答案

相关问题

热门标签

最新问答