Bootstrap崩潰力全部展開

我有一堆不同的部分有自己的摺疊元素。我已經實現了jQuery來擴展和摺疊它們。Bootstrap崩潰力全部展開

的jQuery：

$('.collapse').each(function (index) { 
    $(this).collapse("toggle"); 
});

HTML摘錄：

<ul class="nav nav-tabs"> 
    <li class="active" id="General"><a href="#">General</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active">                                            
     <div class="accordion" id="accordion2">             
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFour">Q. Can I choose my own Username and Password?</a> 
       </div> 
       <div id="collapseFour" class="accordion-body collapse"> 
        <div class="accordion-inner">A. Yes, you can choose your own Username and Password. We suggest using your email address for your Username, but any username that is between 8 and 20 characters long could be used. A secure Password should be 8 to 20 characters long, with no spaces, and contains at least one special character. </div> 
       </div> 
      </div> 
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFive">Q. Can I update by email address online?</a> 
       </div> 
       <div id="collapseFive" class="accordion-body collapse"> 
        <div class="accordion-inner">A. Yes, but I have no idea how right now. </div> 
       </div> 
      </div> 
     </div> 
    <a href="#top" class="btn btn-mini top"><i class="icon-arrow-up"></i> Back To Top</a> 
</div>

http://jsfiddle.net/RmK2h/

有我有幾個不同的問題。

在Internet Explorer中，該功能僅適用於第二次點擊，並且非常容易跳轉。隨着它在第二次點擊工作，按鈕文本是不正確的。
如果我打開其中一個元素，然後單擊展開按鈕，除最初打開的元素之外的所有元素都展開，它會摺疊。實質上，.collapse("toggle")功能只是簡單地將模式更改爲打開或關閉，而不涉及其已經處於的狀態。

來源

2013-02-22 Jon Harding

看起來像IE問題是Bootstrap的問題。從谷歌搜索了一下，看起來collapse功能在某種形式或其他形式的其他版本中突破。所以，除非你使用collapse函數以外的東西，否則我不確定你能否解決這個問題。我有點定在IE（展開/摺疊按鈕沒有得到同步的了），並固定你的這段代碼第二個問題：

$('.expandcollapse').click(function() { 
    if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") { 
     $('.collapse:not(.in)').each(function (index) { 
      $(this).collapse("toggle"); 
     }); 
     $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All"); 
    } 
    else { 
     $('.collapse.in').each(function (index) { 
      $(this).collapse("toggle"); 
     }); 
     $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All"); 
    }; 
});

Fiddle

來源

2013-02-22 16:31:12 Samsquanch