Thu gọn bootstrap - Jquery "Thu gọn tất cả" chức năng

Question

Tôi đang viết trình đọc nguồn cấp dữ liệu cá nhân bằng Bootstrap trên giao diện người dùng và muốn thêm nút "Thu gọn/Mở rộng tất cả".

Đó là mã JavaScript/JQuery đầu tiên của tôi, vì vậy tôi không biết cách gỡ lỗi trừ các biến in trong Bảng điều khiển dành cho nhà phát triển Firefox.

Cấu trúc trang của tôi bao gồm các bảng. Người dùng có thể mở rộng hoặc thu gọn bảng điều khiển bằng cách nhấp vào tiêu đề của bảng điều khiển. Và một nút để thu gọn hoặc mở rộng tất cả các bảng.

Giải pháp của tôi hoạt động hầu hết thời gian, nhưng tôi nhận thấy một hành vi kỳ lạ. Dưới đây là cách tôi tạo lại vấn đề:

1. Mở trang lần đầu tiên
2. Mở rộng một bảng với cách nhấn vào tiêu đề của nó
3. Bây giờ sự sụp đổ tất cả các nút sụp đổ bảng điều khiển mở, và mở rộng những cái khác. Như thể nó "bật" tất cả các bảng thay vì đóng chúng lại.
4. Sau hành vi kỳ lạ này, mọi thứ đều bình thường, tôi không thể tái tạo sự cố mà không làm mới trang. Trên mỗi bước open_panel_count biến có vẻ bình thường.

Đây là phương pháp tôi đang sử dụng:

$(function() { 
    open_panel_count = 0; 
    function update_toggle_button() { 
    $('#toggle-btn').text((open_panel_count ? "Collapse" : "Expand") + " All") 
    } 
    update_toggle_button(); // Run once on page load to text #toggle-btn 

    $('#toggle-btn').click(function() { 
    $('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show'); 
    }); 

    $('.panel-collapse').on('shown.bs.collapse', function() { 
    open_panel_count++; 
    update_toggle_button(); 
    }); 

    $('.panel-collapse').on('hidden.bs.collapse', function() { 
    open_panel_count--; 
    update_toggle_button(); 
    }); 
}); 

bất cứ ai có thể chỉ cho tôi những gì tôi đang làm sai?

Bạn có thể xem toàn bộ mẫu trong: https://github.com/utdemir/furby/blob/master/template.erb Và truy cập vào một bản demo tại địa chỉ: http://p.cogunluklazararsiz.org/furby/

Answer 1

Theo tài liệu Twitter Bootstrap, bạn có thể "kích hoạt nội dung của bạn dưới dạng phần tử có thể thu gọn"., bằng cách chạy:

$('.panel-collapse').collapse({ 
    toggle: false 
}); 

Việc thêm này sẽ giải quyết được sự cố của bạn. Thôi buông đi.

$(function() { 
    $('.panel-collapse').collapse({ 
    toggle: false 
    }); 

... 

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

Không chắc tại sao twitter JS không nhặt data-target="#entry419294611" data-toggle="collapse" của bạn. Khó khăn để gỡ lỗi mà không có một fiddle.

Answer 2

Hãy thử thay đổi

$('#toggle-btn').click(function() { 
    $('.panel-collapse').collapse(open_panel_count ? 'hide' : 'show'); 
    }); 

Đối

$('#toggle-btn').click(function() { 
    var state = open_panel_count ? 'hide' : 'show'; 
    $('.panel-collapse').collapse(state); 
    }); 

Answer 3

$('.panel-collapse').collapse('hide'); 

Bootstrap/JQuery Collapse