Chuyển đổi Javascript với plugin thu gọn Bootstrap

Question

Tôi cố gắng sử dụng chức năng chuyển đổi của plugin thu gọn Bootstrap theo chương trình. Tôi quản lý để chuyển đổi div khi tôi nhấp vào liên kết trong accordion-heading nhưng nó chỉ hoạt động một lần, tức là tôi không thể bấm lần nữa để ẩn div.

Đây là mã của tôi:

<div id="accordion" class="accordion"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a id="program${bean.id}" data-parent="#accordion" 
        class="accordion-toggle"> 
      ... 
      </a> 
     </div> 
     <div id="collapse${bean.id}" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
      ... 
     </div> 
    </div> 
</div> 

Và sau này trong JSP:

$.each($('#accordion a.accordion-toggle'), function(i, link){ 
    $(link).on('click', 
     function(){ 
      // ... 
      $('#collapse' + id_of_a_bean).collapse({ 
       toggle : true, 
       parent : '#accordion' 
      }); 
      // ... 
     } 
    ) 
}); 

Ý của tôi bỏ lỡ một cái gì đó?

Answer 1

Tôi đoán điều này xảy ra với nhiều người.

Khi bạn gọi hàm collapse (FYI hoặc bất kỳ chức năng khởi động) nào, nếu bạn vượt qua một đối tượng, nghĩa là bạn bắt đầu thu gọn sự sụp đổ. Tùy chọn toggle chỉ chuyển đổi một lần khi được gọi (doc).

Bạn phải gọi một lần với các tham số và sau đó chỉ gọi với hành động, dưới dạng chuỗi.

$.each($('#accordion a.accordion-toggle'), function(i, link){ 
    var $collapsible = $('#collapse' + id_of_a_bean); // Let's be thorough 

    $collapsible.collapse({ 
     toggle : true, // May not be necessary anymore 
     parent : '#accordion' 
    }); 

    $(link).on('click', 
     function(){ 
      // ... 
      $collapsible.collapse('toggle'); // Here is the magic trick 
      // ... 
     } 
    ); 
}); 

Live Demo: http://jsfiddle.net/Sherbrow/uycBa/

Chỉ cần để được chính xác, bạn chỉ có thể gọi một lần quá trình init, vì nó hủy bỏ nếu bạn đã thực hiện nó trên cùng một nguyên tố. Đó là lý do tại sao nó chỉ hoạt động một lần.

Answer 2

Tôi thấy rằng chỉ đơn giản là gọi sự sụp đổ hai lần, một lần với cha mẹ và một lần mà không có, thủ thuật khá độc đáo - giải pháp này là thích hợp hơn trong giải pháp của tôi do hệ thống phân cấp.

onclick=" 
$('@("#collapse" + lead.LeadId)').collapse({parent: '#accordion', toggle: true}); 
$('@("#collapse" + lead.LeadId)').collapse('toggle');" 

Answer 3

vấn đề tương tự, tôi chỉ kiểm tra xem phần tử có thể nhìn thấy:

$("#myDiv").is(":visible") ? $("#myDiv").collapse('hide') : /*do nothing*/;