Jquery手风琴默认不折叠答案

【问题标题】：Jquery accordion not collapse by defaultJquery手风琴默认不折叠
【发布时间】：2012-04-26 01:40:23
【问题描述】：

我正在使用 bootstrap 提供的折叠插件这是一个jquery简单的插件

但是默认折叠，如何修改让折叠项默认隐藏，只有当我按下标题时，项目才会折叠并显示？谢谢

The document of the plugin, just few line so it only takes one minute

$(document).ready( function () {
$(".collapse").collapse()({
  toggle: false,
  show: false
  });
} );

这是html：

<div class="accordion-group">
            <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
              Collapsible #1
                  </div>   
          <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
               content1
           </div>
                           <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
              Collapsible #2
                  </div>   
          <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
               content2
           </div>

【问题讨论】：

How do I get my accordion to load with all the menus closed?的可能重复

标签： javascript jquery jquery-ui twitter-bootstrap accordion

【解决方案1】：

对于 Bootstrap 3，有些事情发生了变化。以下代码在 Bootstrap 3 中完成了您想要的功能

如果您希望面板主体默认显示：

<div id="collapseOne" class="panel-collapse collapse in">

如果您希望面板主体默认隐藏：

<div id="collapseOne" class="panel-collapse collapse">

这是一个例子：

<div class="bs-example">
    <div class="panel-group" id="accordion">

          <!- Repeat For Next Panel------->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                       xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
                    </a>
                </h4>
           </div>
               <div id="collapseOne" class="panel-collapse collapse in">
                   <div class="panel-body">
                       xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
                   </div>
               </div> 
         </div>
            <!- Repeat For Next Panel---(but change <div id="collapseTwo")--->

     </div>
 </div>

【讨论】：

并将 href="#collapseOne"> 更改为 href="#collapseTwo">
我很沮丧，直到您的帖子明确表示“in”并不意味着“INvisible”。
你必须有 class="panel panel-default" 吗？我发现如果我从 div 中删除它，它会停止自动关闭。但我不想要它的风格。

【解决方案2】：

<div class="accordion-group collapse">
   <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
          Collapsible #1
   </div>   
   <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
           content1
   </div>
   <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
          Collapsible #2
    </div>   
    <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
          content2
    </div>
</div>

【讨论】：