Sự sụp đổ của Bootstrap chỉ với một phần tử được hiển thị

Question

Tôi đang cố gắng sử dụng các thành phần thu gọn của Bootstrap.

Nó hoạt động tốt nhưng tôi nhận thấy rằng đôi khi nó không đóng tất cả các yếu tố khác; khi tôi nhấp vào theo thứ tự từ thứ nhất đến thứ ba và sau đó quay lại cái đầu tiên, cái thứ ba vẫn mở.

Đánh dấu của tôi giống với mã mẫu mà Bootstrap cung cấp, bởi vì tôi chỉ đang thử nghiệm ngay bây giờ.

<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"> 
      Part 1 
      </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"> 
      Part 2 
      </div> 
      </div> 
     </div> 

     <div class="accordion-group"> 
      <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> 
       Collapsible Group Item #3 
      </a> 
      </div> 
      <div id="collapseThree" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       Part 3 
      </div> 
      </div> 
    </div> 

Các mã JavaScript là thế này:

$(".collapse").collapse("#accordion2"); 

Xét rằng tôi đang nghĩ đến sử dụng các thành phần này trong trình đơn, để hiển thị một nhóm mở theo một giá trị biến PHP để tôi chỉ phải in lớp trong tới divcollapseOne/collapseTwo và cứ tiếp tục như vậy?

Answer 1

Bạn không cần phần javascript, trên thực tế - xóa nó !! Đó là mã chính xác gây ra hành vi lạ - accordion2 được khởi tạo hai lần dẫn đến một tập hợp hai "logic". Vấn đề của bạn có thể tái tạo hoàn toàn bằng cách sử dụng javascript hoặc không.

Nói chung, liên quan đến việc khởi động twitter, khi bạn có thể đặt tất cả dữ liệu và chức năng liên kết trong data attributes, như bạn đã làm ở đây, bạn sẽ không bao giờ phải làm javascript. TB tự động thực hiện công việc khi trang đang tải, bằng cách tìm kiếm những trang đó data attributes.

Xem xét javascript là tùy chọn thứ hai, một cách khác, khi bạn không thể thực hiện những gì bạn muốn bằng cách chỉ cần áp dụng data attributes.

Answer 2

Nếu bạn đã thực hiện đánh dấu của bạn theo bootstrap collapse docs bạn có thể đạt được điều này với mã jQuery sau:

$(document).on('click', '.accordion-toggle', function(e) { 
    event.preventDefault(); 

    $('#accordion2').find('.accordion-body').collapse('hide'); 
    $(this).parent().next().collapse('show'); 
});