Cách kích hoạt chức năng JavaScript sau khi quá trình chuyển đổi "Bootstrap: collapse plugin" được thực hiện

Question

Tôi đang cố gắng kích thước lại iframe chiều cao sau khi Bootstrap: collapse quá trình chuyển đổi plugin kết thúc. Sự kiện nhấp chuột không hoạt động vì quá trình chuyển đổi chưa hoàn tất, JavaScript nhận được thông tin chiều cao sai. Bất kỳ ý tưởng nào để giải quyết vấn đề này?

Answer 1

Bạn cần xử lý sự kiện ẩn trên plugin thu gọn.

From Docs

ẩn - Sự kiện này được kích hoạt khi một yếu tố sụp đổ đã được ẩn từ người sử dụng (sẽ đợi cho quá trình chuyển đổi css để hoàn thành).

$('#myCollapsible').on('hidden', function() { 
    // do something… 
}) 

Như đã chỉ bởi @Francesc trong các bình luận cho Bootstrap 3.0 chúng ta phải sử dụng

$('#myCollapsible').on('hidden.bs.collapse', function() { 
    // do something… 
}) 

Answer 2

Tôi chưa bao giờ sử dụng các plugin sụp đổ, nhưng trong tài liệu đó nói rằng có một callback được gọi là 'ẩn' nên được gọi khi quá trình chuyển đổi phần tử đã hoàn thành:

$('#myCollapsible').on('hidden', function() { 
    // do something… 
}); 

Answer 3

Nếu bạn đang sử dụng bootstrap 3.0 thì khá dễ dàng. shown.bs.collapse là sự kiện được kích hoạt khi phần tử hiển thị quá trình chuyển đổi hoàn tất. Tôi tin rằng bạn đang tìm kiếm một cái gì đó như thế này.

$('#myCollapsible').on("shown.bs.collapse", function(){ 
//trigger content change 
//this code will be triggered when the collapse transition is completed 
//that is your myCollapsible element will have 'in' in your class 
});