手风琴

Question

我正在尝试构建一个非常简单的webapp，它只列出一些手风琴样式的可折叠条目来显示和隐藏小的无序列表。我一直在学习一些教程，因为我对自助训练没有很多经验，但我似乎无法弄清楚我做错了什么。折叠功能工作正常，但扩展功能不会折叠其他功能。这是我正在使用的代码：

<!DOCTYPE html>

手风琴

    <div id="accordian" role="tablist" aria-multiselectable="true">
        <div class="card">
            <div class="card-header" role="tab" id="headingOne">
                <a data-toggle="collapse" href="#one" data-parent="#accordian" aria-expanded="true" aria-controls="one">
                    <h4 class="mb-0">
                        One
                    </h4>
                </a>
            </div>
            <div id="one" class="collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="card-block">
                  <ul>
                      <li>A</li>
                      <li>B</li>
                  </ul>
              </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" role="tab" id="headingTwo">
                <a data-toggle="collapse" href="#two" data-parent="#accordian" aria-expanded="false" aria-controls="two">
                    <h4 class="mb-0">
                        Two
                    </h4>
                </a>
            </div>
            <div id="two" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="card-block">
                  <ul>
                      <li>C</li>
                      <li>D</li>
                  </ul>
              </div>
            </div>
        </div>
    </div>


    <div data-role="footer">
      <h1>Footer</h1>
    </div>
</body>

Answer 1

为了使可折叠项目充当手风琴（在打开一个折叠元素时折叠所有其他可折叠元素），您需要添加类＆＃39; panel-group＆＃39;到包含可折叠元素的封闭div元素。然后只需添加课程＆＃39; panel＆＃39;到面板组div中的所有面板。

＆＃13;

      <div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true">
        <div class="panel card">
            <div class="card-header " role="tab" id="headingOne">
                <a data-toggle="collapse" href="#one" data-parent="#accordian" aria-expanded="true" aria-controls="one">
                    <h4 class="mb-0">
                        One
                    </h4>
                </a>
            </div>
            <div id="one" class="collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="card-block">
                  <ul>
                      <li>A</li>
                      <li>B</li>
                  </ul>
              </div>
            </div>
        </div>

        <div class="panel card">
            <div class="card-header" role="tab" id="headingTwo">
                <a data-toggle="collapse" href="#two" data-parent="#accordian" aria-expanded="false" aria-controls="two">
                    <h4 class="mb-0">
                        Two
                    </h4>
                </a>
            </div>
            <div id="two" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="card-block">
                  <ul>
                      <li>C</li>
                      <li>D</li>
                  </ul>
              </div>
            </div>
        </div>
    </div>

＆＃13;

使用bootstrap手风琴时遇到问题

手风琴

1 个答案: