引導摺疊 - jquery「摺疊全部」功能

Question

我正在使用前端的Bootstrap編寫個人提要閱讀器，並且想要添加「摺疊/展開全部」按鈕。

這是我的第一個JavaScript/JQuery代碼，所以我不知道如何調試它，除了在Firefox Developer Console中打印變量。

我的頁面結構由面板組成。用戶可以通過單擊面板標題來展開或摺疊面板。還有一個按鈕可以摺疊或展開所有面板。

我的解決方案在大多數情況下都能正常工作，但我注意到了一個奇怪的行爲。下面是我如何重現該問題：

1. 打開網頁第一次
2. 展開一個面板，點擊其標題
3. 現在全部摺疊按鈕摺疊開啓面板，並擴展其他的。就好像它「切換」所有面板而不是關閉它們。
4. 經過這種奇怪的行爲，一切正常，我無法重現問題，無需刷新頁面。在每一步open_panel_count變量看起來都很正常。

這裏是我使用的方法：

$(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(); 
    }); 
}); 

任何人都可以點我什麼，我做錯了什麼？

你可以看到在整個模板：https://github.com/utdemir/furby/blob/master/template.erb 而在訪問演示：http://p.cogunluklazararsiz.org/furby/

Answer 1

按照Twitter的引導文件，你可以「作爲可摺疊元素激活您的內容」，通過運行：

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

添加這應該可以解決您的問題。搏一搏。

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

... 

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

不知道爲什麼Twitter的JS是不是拿起你的data-target="#entry419294611" data-toggle="collapse"。難以調試，無需小提琴。

Answer 2

嘗試改變

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

對於

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

Answer 3

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

Bootstrap/JQuery Collapse