Question

我是Bootstrap的新手。我有一个手风琴元素几乎完美的工作，除了一个问题。当我选择一个新面板时，它会正确打开，但不会自动关闭最后一个打开的面板。事实上，我可以一次打开所有三个。我在Stack Overflow上发现了这个问题，但在所有情况下，问题都与未将data-parent属性设置为包装器div id（或者省略数据父级名称前面的＃）有关。但在我的情况下，这不是问题。我正在使用Bootstrap 4.我使用最新的Bootstrap CDN和Jquery链接在小提琴中测试了我的手风琴。同样的问题，所以我的代码中的某些东西并不是冲突的。显然，我错过了一些东西（可能很简单！）。任何帮助赞赏。这是我的代码。

<div id="methodsaccordion" role="tablist" aria-multiselectable="true">

<div class="card mb-3">
    <div class="card-header" role="tab" id="headingOne">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child 0-2 years of age
            </a>
        </h5>
    </div>
    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
        </div> <!-- end card block -->
    </div> <!-- end collapse 1 -->
</div> <!-- end card -->

<div class="card mb-3">
    <div class="card-header" role="tab" id="headingTwo">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child 2-5 years of age
            </a>
        </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="card-block">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
        </div> <!-- end card block -->
    </div> <!-- end collapse 2 -->
</div> <!-- end card -->

<div class="card">
    <div class="card-header" role="tab" id="headingThree">
        <h5 class="mb-0">
            <a data-toggle="collapse" data-parent="#methodsaccordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
                Child over 5 years of age
            </a>
        </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ....
        </div> <!-- end card block -->
    </div> <!-- end collapse 3 -->
</div> <!-- end card -->

Answer 1

看起来这是与Bootstrap 4正式发布的回归。您需要将数据父级移动到可折叠内容而不是折叠链接。

正确的代码应为：

<div id="methodsaccordion" role="tablist" aria-multiselectable="true">
  <div class="card mb-3">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child 0-2 years of age
        </a>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingOne">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
      </div> <!-- end card block -->
    </div> <!-- end collapse 1 -->
  </div> <!-- end card -->

  <div class="card mb-3">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child 2-5 years of age
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingTwo">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ...
      </div> <!-- end card block -->
    </div> <!-- end collapse 2 -->
  </div> <!-- end card -->

  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <img class="img-fluid" src="img/image.jpg" style="width: 10%" />
          Child over 5 years of age
        </a>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" role="tabpanel" data-parent="#methodsaccordion" aria-labelledby="headingThree">
      <div class="card-block">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed ....
      </div> <!-- end card block -->
    </div> <!-- end collapse 3 -->
  </div> <!-- end card -->
</div>

Bootstrap手风琴没有崩溃

1 个答案: