单击自身时避免关闭活动选项卡(引导折叠的手风琴)

时间:2019-12-12 17:06:44

标签: twitter-bootstrap bootstrap-4 accordion bootstrap-accordion bootstrap-tabs

我正在手风琴4上制作手风琴,并且工作正常……但是,就像de tab-pane的作品一样,我在点击self时需要避免关闭当前内容。

我的意思是:将始终打开一个选项卡。我尝试了各种解决方案,但似乎无法通过手风琴找到此行为的关键。

以下是您的一个代码笔:https://codepen.io/tamplix/pen/QWwEoQM

<div class="container" id="accordion">
  <div class="row">
    <div class="tab col-3 p-3" data-toggle="collapse" data-target="#tab1" aria-expanded="true" aria-controls="tab1">TAB 1</div>
    <div class="tab col-3 p-3 collapsed" data-toggle="collapse" data-target="#tab2" aria-expanded="false" aria-controls="tab2">TAB 2</div>
  </div>
  <div class="row">
    <div class="tab-content col-12 collapse show" id="tab1" data-parent="#accordion">
      <div class="p-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus justo ut turpis varius mattis. Praesent auctor eros quis neque feugiat ornare. Mauris eget sagittis tortor. Quisque ac pellentesque leo. Proin sed sodales eros. Maecenas eu nulla auctor, eleifend dui ut, tempor massa. Ut convallis mi dapibus, pretium felis aliquet, vestibulum magna. Morbi consectetur diam in varius tincidunt. Etiam sit amet nisi interdum, posuere neque sed, aliquam nisi. Mauris ut eleifend ligula, sit amet rutrum mauris.</div>
    </div>
    <div class="tab-content col-12 collapse" id="tab2" data-parent="#accordion">
      <div class="p-3">Vivamus dapibus justo ut turpis varius mattis. Praesent auctor eros quis neque feugiat ornare.Quisque ac pellentesque leo. Proin sed sodales eros. Maecenas eu nulla auctor, eleifend dui ut, tempor massa. Ut convallis mi dapibus, pretium felis aliquet, vestibulum magna. Morbi consectetur diam in varius tincidunt.  Mauris eget sagittis tortor. Etiam sit amet nisi interdum, posuere neque sed, aliquam nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut eleifend ligula, sit amet rutrum mauris.</div>
    </div>
  </div>
</div>

我需要它成为……的“手风琴”:)

0 个答案:

没有答案
相关问题