引導手風琴有麻煩

Question

我正在嘗試構建一個非常簡單的Web應用程序，該應用程序僅列出一些可折疊樣式的可折疊條目，以顯示和隱藏小的無序列表。 我一直在關注一些教程，因為我對Bootstrap並不十分了解，但是我似乎無法弄清楚自己在做錯什么。 折疊功能可以正常工作，但展開一個功能不會折疊另一個功能。 這是我正在使用的代碼：

<!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

為了使可折疊項目充當手風琴（打開一個項目時折疊所有其他可折疊元素），您需要向包含可折疊元素的封閉div元素中添加“ panel-group”類。 然后只需將“ panel”類添加到面板組div中的所有面板即可。

  <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>

引導手風琴有麻煩

問題描述

手風琴

1 個解決方案

解決方案1
0 2017-02-13 01:15:44

引導手風琴有麻煩

問題描述

手風琴

1 個解決方案

解決方案1 0 2017-02-13 01:15:44

解決方案1
0 2017-02-13 01:15:44