twitter-bootstrap 可折叠引导程序，显示第一个元素

Collapsible bootstrap, show first element

提问by fatiDev

I want to show the first element of this collapsible accordion. I did some research in internet but in vain

我想展示这个可折叠手风琴的第一个元素。我在互联网上做了一些研究，但徒劳无功

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne" >
        Aller au dossier personnel d'un agent
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
      <div class="accordion-inner">
        <form action="goToAgent.do" method="post">
          <p align="center">
            <input type="hidden" value="identite" name="retour">
            <label for="nomPrenom" >
              Entrer le nom complet de l'agent:
            </label>
            <input type="text" name="nomPrenom" class="typeahead" /> <br>
            <input type="submit" value="appliquer" class="btn btn-info" />
        </form>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Ajout d'un nouveau fonctionnaire
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <!-- lorem -->
      </div>
    </div>
  </div>
</div>

采纳答案by Billy Moat

I don't think you've got all the HTML you need for the accordion to work unless you haven't pasted it all above.

我不认为您已经获得了手风琴工作所需的所有 HTML，除非您还没有将其全部粘贴到上面。

The Bootstrap docs first example has the first element set to be open:

Bootstrap 文档的第一个示例将第一个元素设置为打开：

http://twitter.github.com/bootstrap/javascript.html#collapse(These docs are for v2.3.2, which is no longer officially supported.)

http://twitter.github.com/bootstrap/javascript.html#collapse（这些文档适用于 v2.3.2，不再受到官方支持。）

I think it's the class "in" that sets it to be open initially.

我认为是“in”类将其设置为最初开放。

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Anim pariatur cliche...
</div>
</div>
</div>
</div>

回答by Sherbrow

Update for v4 :

v4 更新：

The class .showcan be used on the .collapseelement to open it.

.show可以在.collapse元素上使用该类来打开它。

<div class="accordion" id="accordion-parent">
    <a data-toggle="collapse" href="#collapseOne"></a> 
    <div id="collapseOne" class="collapse show" data-parent="#accordion-parent"></div>
    <a data-toggle="collapse" href="#collapseTwo"></a> 
    <div id="collapseTwo" class="collapse" data-parent="#accordion-parent"></div>
</div>

Here's the same example working with v4 : Demo v4 (jsfiddle)

这是使用 v4 的相同示例：Demo v4 (jsfiddle)

---

---

Bootstrap v2

引导程序 v2

If you add the .inclass to the .collapse, it stays open :

如果您将.in类添加到.collapse，它会保持打开状态：

<div class="accordion-group">  
  <div class="accordion-heading">  
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">  
     Ajout d'un nouveau fonctionnaire
    </a>  
  </div>  
  <div id="collapseTwo" class="accordion-body collapse in"> 
    <div class="accordion-inner">
    </div>  
  </div>  
</div>

Demo (jsfiddle)

演示（jsfiddle）

---

---

这是带有简化标记的演示： http://jsfiddle.net/Sherbrow/yYuRz/2/http://jsfiddle.net/Sherbrow/yYuRz/2/

You do need to remove the style="height: 0px;"from the .collapseelement if you want it to be displayed.

如果要显示元素，则需要style="height: 0px;"从.collapse元素中删除。

回答by Adri

You also can trigger a click on the fist collapse element

您还可以触发对拳头折叠元素的点击

$("#accordion a:first").trigger("click");