iT邦幫忙

0

21.Bootstrap(中文教程)元件:折疊:手風琴

ㄧ.折疊-切換內容的可見性

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a href="#collapse-1" data-toggle="collapse">title-1</a>
    </div>
    <div class="collapse" id="collapse-1" data-parent="#accordion">
      <div class="card-body">hello~1</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a href="#collapse-2" data-toggle="collapse">title-2</a>
    </div>
    <div class="collapse" id="collapse-2" data-parent="#accordion">
      <div class="card-body">hello~2</div>
    </div>
  </div>
</div>

#demo.component{
  padding: 50px;
}

重點:
1.手風琴的部分a連結就完全使用卡片的結構,不像上次那樣a連結與內容分開
2.這個功能主要有兩個以上的內容與按鈕,只能看到一個內容之前呼叫過的則隱藏
3.在這個功能當中一定要在.collapse加入 data-parent="#accordion",否則呼叫一個後在呼叫下一個則兩個內容都看得到
4.父元素加入#accordion,使用data-parent="#accordion"代表為手風琴功能

codepen
參考:bootstrap4


尚未有邦友留言

立即登入留言