Question

我在想。我有这个简单的手风琴菜单：

问题是，我想，当我有一个打开的菜单时，当我点击另一个菜单时，自动关闭前一个菜单。换句话说，一次只能打开一个......

您如何看待，最佳解决方案是什么？没有jQuery，我想要vanilla JS :)

＆＃13;

var accordions = document.getElementsByClassName("accordion");
    
    for (var i = 0; i < accordions.length; i++) {
      accordions[i].onclick = function() {
        this.classList.toggle('is-open');
    
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
          // accordion is currently open, so close it
          content.style.maxHeight = null;
        } else {
          // accordion is currently closed, so open it
          content.style.maxHeight = content.scrollHeight + "px";
        }
      }
    }

＆＃13;

<button class="accordion">Accordian #1</button>
        <div class="accordion-content open">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
          </p>
        </div>
    
    
        <button class="accordion">Accordian #2</button>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
          </p>
        </div>
    
    
        <button class="accordion">Accordian #3</button>
        <div class="accordion-content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
          </p>
        </div>
      </div>

＆＃13;

Answer 1

您可以迭代所有手风琴并在点击任何手风琴时删除is-open课程：

var accordions = document.getElementsByClassName("accordion");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function() {

    for (var j = 0; j < accordions.length; j++) {
      accordions[j].classList.remove('is-open');
    }
    accordions[i].classList.toggle('is-open');
  }
}

然后使用CSS隐藏手风琴：

.accordion:not(.is-open) {
  display: none;
}

Answer 2

您不必遍历所有手风琴，因为您可以保存最后打开的手风琴。请参阅下面的解决方案。

＆＃13;

var accordions = document.getElementsByClassName("accordion");
var openAccordion = null;

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function() {
    if (openAccordion != null && openAccordion != this) {
      openAccordion.classList.toggle('is-open');
      var content = openAccordion.nextElementSibling;
      content.style.maxHeight = null;
    }
    
    this.classList.toggle('is-open');

    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      // accordion is currently open, so close it
      content.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content.style.maxHeight = content.scrollHeight + "px";
    }
    
    openAccordion = this;
  };
}

＆＃13;

.accordion-content {
  max-height: 0;
  overflow: hidden;
}

＆＃13;

<button class="accordion">Accordion #1</button>
<div class="accordion-content open">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
  </p>
</div>

<button class="accordion">Accordion #2</button>
<div class="accordion-content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
  </p>
</div>

<button class="accordion">Accordion #3</button>
<div class="accordion-content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
  </p>
</div>

＆＃13;

手风琴菜单疑惑

2 个答案: