Bootstrap响应标签 - 手风琴,面板在点击时不会关闭

时间:2016-12-02 18:48:31

标签: javascript jquery html css twitter-bootstrap

我正在使用jQuery插件通过将标签转换为sm& amp;上的手风琴来使一些引导标签响应。 xs决议。它工作正常,但它不像普通的自举手风琴那样起作用 - 因为我希望能够通过点击面板标题来关闭手风琴面板,但是这不适用于这个插件。如果用户点击活动面板的面板标题,如何将其折叠到手风琴面板将折叠的位置?我知道在实际的bootstrap手风琴中,这可以通过添加data-toggle =“collapse”来完成,但我对js不是很熟悉,所以我不确定如何编辑插件j来完成这个。您可以使用以下链接查看有效的jsfiddle示例。

HTML:

<ul class="nav nav-tabs responsive-tabs">
  <li class="active"><a href="#home1">Home</a></li>
  <li><a href="#profile1">Profile</a></li>
  <li><a href="#Tab3">Tab3</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home1">
    <p>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>

  <div class="tab-pane" id="profile1">
    <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>

  <div class="tab-pane" id="Tab3">
    <p>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

JS:

$('.responsive-tabs').responsiveTabs({
  accordionOn: ['xs', 'sm'] // xs, sm, md, lg
});

的jsfiddle: http://jsfiddle.net/r40qvmww/16/

0 个答案:

没有答案