Bootstrap Collapse không chuyển đổi sau khi bạn hiển thị, ẩn hoặc chuyển đổi từ mã

Question

HTML của tôi là:

<div id="accordion-container"> 
    <div class="accordion" id="navaccordion"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseMenu"> 
        <strong>My Menus</strong> 
       </a> 
      </div> 
      <div id="collapseMenu" class="accordion-body collapse in"> 
       <div class="accordion-inner"> 
        <div class="navigation" id="navigationcontainer"> 
         <span id="menutree"> 
          MenuTree 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQuickLinks"> 
        <strong>Quick Links</strong> 
       </a> 
      </div> 
      <div id="collapseQuickLinks" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <div class="quicklinks" id="quicklinkscontainer"> 
         <span id="quicklinkslist"> 
          QuickLinks 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQueue"> 
        <strong>Queue</strong> 
       </a> 
      </div> 
      <div id="collapseQueue" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <div class="queue" id="queuecontainer"> 
         <span id="queuetree"> 
          Queue 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

dụ của tôi là ở đây: http://jsfiddle.net/pdavis68/Xut4C/2/

Nếu bạn loại bỏ các mã JavaScript, bạn sẽ nhận thấy rằng việc chuyển đổi của sự sụp đổ hoạt động đúng. Nếu bạn nhấp vào "Liên kết nhanh", "Menu của tôi" sẽ đóng và "Liên kết nhanh" sẽ mở ra.

Nếu bạn rời JS, bạn sẽ thấy rằng mở "My Menus" hoặc "Quick Links" không gây ra bất kỳ điều gì khác sụp đổ, nhưng nếu bạn mở "Hàng đợi", nó vẫn sẽ khiến người khác sự sụp đổ.

Dường như tôi không sử dụng lệnh "chuyển đổi", "hiển thị" hoặc "ẩn" trong khi thu gọn, chức năng này sẽ phá vỡ chức năng chuyển đổi. Ngoài ra, trong ví dụ, những gì nên xảy ra (bằng cách tính toán của tôi, ít nhất) là rằng "My Menus" nên chuyển đổi đóng cửa (mà nó có) và sau đó "Liên kết nhanh" nên chuyển đổi mở (mà nó kHÔNG làm)

Vì vậy, 2 câu hỏi:.

1. làm thế nào để lập trình cho các nhóm/hide mà không vi phạm các chức năng chuyển đổi?

2. Làm cách nào để chuyển đổi mọi thứ đang mở?

Answer 1

1.Try sử dụng collapse() với các tùy chọn, các 'parent' là quan trọng

$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'}); 
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' }); 

Fiddle: http://jsfiddle.net/hieuh25/Xut4C/6/

2.Basically bạn có 2 cách:

• Add lớp in đến div đó, ví dụ: <div id="collapseMenu" class="accordion-body collapse in"> khiến div đó mở.

• Sử dụng collapse() với tùy chọn 'toggle': true như trên, khi div đóng.

Hy vọng điều đó sẽ hữu ích.

Answer 2

Bạn cũng có thể thêm data-parent="#navaccordion"-<div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> và gọi mà không cần chìa khóa addional 'parent' như .collapse({"toggle": true});

Answer 3

Hãy thử kích hoạt nội dung của bạn là một yếu tố đóng mở đầu tiên. Tôi lướt qua phần này khi đọc tài liệu và nó thực sự làm tôi bối rối.

$('#myCollapsible').collapse({ 
    toggle: false 
}) 

Sau khi kích hoạt, bạn có thể ẩn và hiển thị như bình thường.

$('#myCollapsible').collapse('hide'); 
$('#myCollapsible').collapse('show'); 

http://getbootstrap.com/javascript/#collapse-methods