Bootstrap đóng mở, hiển thị phần tử đầu tiên

Question

Tôi muốn hiển thị phần tử đầu tiên của accordion thu gọn này. Tôi đã làm một số nghiên cứu trên internet nhưng vô ích

<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>

Answer 1

Tôi không nghĩ rằng bạn đã có tất cả HTML mà bạn cần cho accordion để làm việc trừ khi bạn chưa dán nó tất cả trên . Ví dụ

Các Bootstrap tài liệu đầu tiên có phần tử đầu tiên thiết lập để được mở:

http://twitter.github.com/bootstrap/javascript.html#collapse

Tôi nghĩ rằng đó là lớp "trong" mà bộ nó được mở ban đầu.

<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> 

Answer 2

Bạn phải có cách nhìn quá xa.

Nếu bạn QAD lớp .in đến .collapse, nó vẫn mở:

<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)

---

đánh dấu của bạn là lộn xộn, vì vậy đây là bản demo với một đánh dấu chính xác: http://jsfiddle.net/Sherbrow/yYuRz/2/

Bạn cần phải xóa style="height: 0px;" khỏi phần tử .collapse nếu bạn muốn nó được phân phối layed.

Answer 3

Bạn cũng có thể kích hoạt một nhấp chuột vào các yếu tố nắm tay sụp đổ

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