बूटस्ट्रैप संकुचित करें - Jquery "सभी को संकुचित करें" फ़ंक्शन

Question

मैं बूटस्ट्रैप का उपयोग करके व्यक्तिगत फ़ीड रीडर लिख रहा हूं, और "सभी को संकुचित/विस्तृत करें" बटन जोड़ना चाहता था।

यह मेरा पहला जावास्क्रिप्ट/JQuery कोड है, इसलिए मुझे नहीं पता कि फ़ायरफ़ॉक्स डेवलपर कंसोल में मुद्रण चर को छोड़कर इसे कैसे डिबग करना है।

मेरी पृष्ठ संरचना में पैनल शामिल हैं। उपयोगकर्ता पैनल शीर्षलेख पर क्लिक करके पैनल को विस्तृत या संक्षिप्त कर सकता है। और सभी पैनलों को ध्वस्त या विस्तृत करने के लिए एक बटन।

मेरा समाधान ज्यादातर बार काम करता है, लेकिन मैंने एक अजीब व्यवहार देखा।

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

का प्रयास करें, तो आप "आपकी सामग्री को एक संक्षिप्त तत्व के रूप में सक्रिय कर सकते हैं।", चलकर:

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

इसे जोड़ने से आपकी समस्या का समाधान होना चाहिए। इसकी कोशिश करें।

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

... 

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

सुनिश्चित नहीं हैं कि क्यों चहचहाना जेएस अपने 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