Twitter Bootstrap 2 khi sự kiện thu gọn

Question

có cách nào để nắm bắt khi menu thu gọn xuất hiện (hoặc khi người dùng nhấp vào nút thu gọn) không?

Tôi đang sử dụng khung và lớp học chuẩn bootstrap twitter.

Answer 1

TWITTER bootstrap 2

Dường như các plugin được thêm lớp "trong" nhóm sụp đổ hoạt động. Vì vậy, có lẽ bạn có thể làm một cái gì đó như thế.

if($('#collapseOne').hasClass('in')){ 
..do something 
} 

EDIT:

Được rồi, tôi không có anyway thử nghiệm ngay bây giờ, vì vậy đây là những loại chỉ đoán. Tôi chắc chắn bạn có thể dễ dàng xác định thời điểm liên kết thu gọn được nhấp bằng cách thực hiện việc này.

$('.accordion-toggle').click(function(){ 
    console.log('clicked'); 
}); 

Tuy nhiên nếu bạn muốn biết chính xác cái nào đã được nhấp, bạn có thể sẽ phải lập chỉ mục chúng.

Answer 2

Sử dụng "thể hiện" sự kiện handler:

$("#accordion").on("shown",function(event){ 
     collapse_element = event.target; 
    }); 

Tham khảo: http://twitter.github.com/bootstrap/javascript.html#collapse để xem các sự kiện khác được hỗ trợ

Answer 3

Nếu bạn muốn sử dụng giảm bớt hoạt hình với sự thay đổi của biểu tượng bạn cần làm điều này trên show/hide.

Trong ví dụ này, tôi đang sử dụng 2.3.2 bootstrap, jQuery 1.8.3, và Font tạo ảnh vui nhộn 3.2.1

HTML:

<div id="accordion" class="accordion"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a data-item-id="{id}" href="#something" data-parent="#accordion" 
     data-toggle="collapse" class="accordion-toggle"> 
     <i class="icon icon-expand-alt"></i> {title}</a> 
    </div> 
    <div data-item-id="{id}" class="accordion-body collapse" id="something"> 
     <div class="accordion-inner"> 
     {Content} 
     </div> 
    </div> 
    </div> 
... {additional panels} 
</div> 

js:

$('#accordion').on('show hide', function (e) { 
    var oTarget = $(e.target); 
    var oIcon = $('i', $('a[data-item-id="' + oTarget.attr('data-item-id') + '"]')); 
    oIcon.toggleClass('icon-expand-alt icon-collapse-alt', 200); 
}); 

Answer 4

Trong bootstrap 3.x, bốn sự kiện bạn đang tìm kiếm là:

show.bs.collapse 
shown.bs.collapse 
hide.bs.collapse 
hidden.bs.collapse 

Chúng kích hoạt trên phần tử DOM mục tiêu dữ liệu, ví dụ: sau mark-up:

<div role="navigation" class="navbar navbar-inverse"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">Title</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li id="item1"><a href="#item1">Menu Item 1</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Bạn muốn nghe (trong jQuery) thông qua:

$('.navbar-collapse').on('shown.bs.collapse', function() { alert('shown'); }); 
$('.navbar-collapse').on('hidden.bs.collapse', function() { alert('hidden'); });