Question

我有一个手风琴，其中包括一些我打算使用移动导航的嵌套手风琴。我对JavaScript并不是最好的，所以我不得不找到一些教程来使自己到达现在的位置。现在我需要的是在打开另一只手风琴时将其关闭。

这是我到目前为止使用的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";
    } 
  });
}

给我麻烦的是使用嵌套的手风琴，并确保它们也在关闭。

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>

打开另一个手风琴时如何自动关闭它？

1 个答案: