bootstrap ban đầu phần tử bị sập

Question

Tôi đang sử dụng mẫu bootstrap và tôi muốn thay đổi cách hoạt động của accordion theo mặc định.

Làm cách nào để chuyển đổi được đóng khi trang được nhìn thấy lần đầu tiên (khi tải)?

<div class="accordion-heading"> 
    <a class="accordion-toggle" 
     data-toggle="collapse" 
     data-parent="#accordion2" 
     href="#collapseOne">Open!</a> 
</div> 
<div id="collapseOne" class="accordion-body collapse in"> 
    <div class="span6"> 
     <div class="well well-small"> 
      <div class="accordion-toggle"> 
       ...some text... 
      </div> 
     </div> 
    </div> 
    <div class="span2"></div>        
</div> 

Answer 1

Khi bạn mở rộng hoặc thu gọn accordion nó chỉ cần thêm/loại bỏ một lớp học "trong" và đặt height:auto hoặc 0 để div accordion.

Demo

Vì vậy, trong accordion của bạn khi bạn xác định nó chỉ loại bỏ "trong" lớp từ div như dưới đây. Bất cứ khi nào bạn mở rộng một accorion nó chỉ thêm lớp "in" để làm cho nó hiển thị.

Nếu bạn hiển thị trang có trình khởi động "trong", hãy tìm lớp và nó sẽ làm cho chiều cao của div: tự động, nếu nó không có chiều cao của nó sẽ ở độ cao bằng không.

<div id="collapseOne" class="accordion-body collapse"> 

Answer 2

Bạn cần phải loại bỏ "trong" từ "sụp đổ trong"

Answer 3

giải pháp khác là thêm toggle = false vào mục tiêu sụp đổ, điều này sẽ ngăn chặn nó một cách ngẫu nhiên mở và đóng cửa mà sẽ xảy ra nếu bạn chỉ cần loại bỏ các "trong"

ví dụ

<div class="accordion-heading"> 
    <a class="accordion-toggle" 
     data-toggle="collapse" 
     data-parent="#accordion2" 
     href="#collapseOne">Open!</a> 
</div> 
<div 
    id="collapseOne" 
    class="accordion-body collapse" 
    data-toggle="false" 
    > 
    <div class="span6"> 
     <div class="well well-small"> 
      <div class="accordion-toggle"> 
       ...some text... 
      </div> 
     </div> 
    </div> 
    <div class="span2"></div>        
</div> 

Answer 4

Nếu xóa lớp in không hoạt động cho bạn, chẳng hạn như trường hợp của tôi, bạn có thể buộc trạng thái ban đầu bị thu gọn sử dụng thuộc tính hiển thị CSS:

... 
<div id="collapseOne" class="accordion-body collapse" style="display: none;"> 
...