javascript - 如何在打开另一个 Accordion 时自动关闭 Accordion ？

Question

我有一个 Accordion ，其中包含一些嵌套的 Accordion ，我打算将其用于移动导航。我不是最擅长 JavaScript，所以我必须找到教程才能达到现在的水平。我现在需要的只是当其他 Accordion 打开时关闭所有其他 Accordion 。

这是我目前拥有的 HTML:

<div id="mobile-nav">
  <button class="accordion">Section 1</button>
  <div class="panel">
    <button class="accordion">Subsection</button>
    <div class="panel">
      <ul class="nav-list">
        <li class="nav-item">Option 1</li>
        <li class="nav-item">Option 2</li>
      </ul>
    </div>
  </div>
  <button class="accordion">Section 2</button>
  <div class="panel">
    <button class="accordion">Subsection 1</button>
    <div class="panel">
      <ul class="nav-list">
        <li class="nav-item">Option 1</li>
        <li class="nav-item">Option 2</li>
      </ul>
    </div>
    <button class="accordion">Subsection 2</button>
    <div class="panel">
      <ul class="nav-list">
        <li class="nav-item">Option 1</li>
        <li class="nav-item">Option 2</li>
      </ul>
    </div><button class="accordion">Subsection 3</button>
    <div class="panel">
      <ul class="nav-list">
        <li class="nav-item">Option 1</li>
        <li class="nav-item">Option 2</li>
      </ul>
    </div>
  </div>
</div>

这是我从教程和论坛中拼凑而成的 Javascript:

var acc = document.getElementsByClassName("accordion");
var i;

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

给我带来麻烦的是使用嵌套的 Accordion ，并确保它们也关闭。

Answer 1

有一种使用 Bootstrap 的方法，因此您不需要使用 javascript。看看这个示例是否可以帮助您。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="accordion">
  <!-- Section1 -->
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Section 1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
       <div class="panel">
        <ul class="nav-list">
          <li class="nav-item">Option 1</li>
          <li class="nav-item">Option 2</li>
        </ul>
      </div>
     </div>
    </div>
  </div>
  
  <!-- Section 2 -->
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Section 2
        </button>
      </h5>
    </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
          <div class="panel">
           <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">SubSection</button>
              </h5>
            </div>
         </div>
      </div>
    </div>
</div>

<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
  <div class="card-body">
     <div class="panel">
        <ul class="nav-list">
          <li class="nav-item">Option 1</li>
          <li class="nav-item">Option 2</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>