以编程方式打开/关闭Bootstrap手风琴

时间:2018-01-18 20:04:34

标签: javascript jquery css twitter-bootstrap bootstrap-accordion

我为手风琴尝试了这个Bootstrap示例:

    <div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

this page中可以阅读:

  

以下示例通过扩展面板显示一个简单的手风琴   成分

     

注意:使用data-parent属性确保所有可折叠   其中一个指定的父元素将被关闭   显示可折叠项目。

工作正常。

现在我想以编程方式显示/隐藏手风琴面板。所以,为此,我使用了方法:

.collapse("show")   Shows the collapsible element   
.collapse("hide")   Hides the collapsible element

此工作正常,但在这种情况下,当我以编程方式显示/隐藏面板时,如果我尝试通过单击面板标题(按标签)打开/关闭面板,面板似乎不是已经连接了:当我打开一个面板时,其他人不再自动关闭。

我是否要在collapse Bootstrap方法中更改或添加内容?

0 个答案:

没有答案