Twitter引導程序展開/摺疊全部 - 在引導程序選項卡內

我正在使用Twitter Bootstrap的選項卡在每個選項卡中保存常見問題集的手風琴。要求是爲展開/摺疊答案的每個選項卡設置展開/摺疊全部按鈕。我目前有第一個加載的選項卡的展開/摺疊按鈕正常工作。但是，當我點擊另一個標籤並執行相同的按鈕時，它不起作用。當我點擊返回到加載的初始選項卡時，它也不再起作用。Twitter引導程序展開/摺疊全部 - 在引導程序選項卡內

這裏是jsfiddle

HTML下面

<ul class="nav nav-tabs" id="tabFAQ"> 
     <li class="active"><a href="#GQ">General Questions</a></li> 
     <li><a href="#ICQ">Insurance Coverage</a></li> 
     <li><a href="#PQ">Payment</a></li> 
     <li><a href="#FQ">Forms</a></li> 
     <li><a href="#CQ">Claims</a></li> 
    </ul> 
    <div class="tab-content" id="faqContent"> 
     <div class="tab-pane active" id="GQ"> 
      <div class="accordion" id="generalQuestions"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseOne_GQ">Q. What do I do if I’m having trouble logging in?</a> 
        </div> 
        <div id="collapseOne_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Please contact our Customer Care team at 800-821-7303 for assistance. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseTwo_GQ">Q. Will additional online services be added to this portal?</a> 
        </div> 
        <div id="collapseTwo_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes. We will be adding many online services to this portal over the next six months. Please check back often.</div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseThree_GQ">Q. What information am I able to access on this portal?</a> 
        </div> 
        <div id="collapseThree_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. We currently have the ability to display any premiums that are currently due and allow you to make an immediate one-time payment from your checking account, savings account, Visa or MasterCard. Your payment will be confirmed immediately. Other functions are planned to be added to the portal over the next six months. Check back often. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFour_GQ">Q. Can I choose my own Username and Password?</a> 
        </div> 
        <div id="collapseFour_GQ" 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_GQ">Q. Can I update by email address online?</a> 
        </div> 
        <div id="collapseFive_GQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, but I have no idea how right now. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="ICQ"> 
      <div class="accordion" id="Div1"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne_ICQ">Q. Insurance Coverage question Stub for Later? </a> </div> 
         <div id="collapseOne_ICQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="PQ"> 
     <div class="accordion" id="accordion3"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne_PQ">Q. When is my payment actually made to my account? </a> </div> 
         <div id="collapseOne_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Your payment is posted to your account within 24 hours after receipt of the funds. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseSeven_PQ">Q. What is a one-time payment? </a> </div> 
         <div id="collapseSeven_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. This is a web-based service that enables our customers to make a single payment to pay their insurance premium. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseEight_PQ">Q. How do I know my payments are secure? </a> </div> 
         <div id="collapseEight_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Our portal uses encryption software and hardware to protect your information. For more information, view our <a href="#">Privacy Policy</a>. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseNine_PQ">Q. Can I use a debit card to make a one-time online payment? </a> </div> 
         <div id="collapseNine_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can use your debit card. Your PIN is not required because this is a PIN-less debit transaction. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseTen_PQ">Q. Can I use a credit card to make a one-time online payment? </a> </div> 
         <div id="collapseTen_PQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can use your Visa or MasterCard credit card to make a payment. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="FQ"> 
      <div class="accordion" id="Div3"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne_FQ">Q. Forms Question Stub for Later? </a> </div> 
         <div id="collapseOne_FQ" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="CQ"> 
      <div class="accordion" id="Div5"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne_CQ">Q. Claims Question Stub for Later? </a> </div> 
         <div id="collapseOne_CQ" class="accordion-body collapse in"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

的Javascript下面：

$(document).ready(function() { 
$('.modal').appendTo($("body")); 

$('#tabFAQ a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

$('.expandcollapse').click(function() { 

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

    if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") { 
     $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All"); 
    } 
    else { 
     $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All"); 
    }; 
});

}）;

我想知道是否因爲其他標籤內容在頁面初始加載時未加載到DOM中。所以我使用了jquery .each（）函數，希望即使它們最初沒有加載，它們也會切換。

有人可以幫我檢測爲什麼按鈕停止工作時選項卡被選中？

來源

2012-12-19 Jon Harding

有兩個問題：

1）自舉使用scrollHeight屬性轉變的.collapse的div的高度，但scrollHeight屬性始終爲0時，不顯示的元素;當您單擊「全部展開」按鈕時，無法正確設置隱藏選項卡中.collapse div的高度。

2）ontransitionend事件不會觸發未顯示的元素。 Bootstrap在其崩潰方法中設置了一個標誌（transitioning），它在ontransitionend中重置，但對於未顯示的元素，ontransitionend永遠不會被觸發。點擊「全部展開」按鈕後，Bootstrap認爲所有未顯示的.collapse div處於轉換狀態，並且每次後續調用這些div的摺疊方法都會被短路。

由於您無法控制這些問題中的任何一個，所以需要做的是在單擊「全部展開/摺疊」按鈕時僅摺疊活動選項卡的div，並更新div的摺疊設置在它變爲活動狀態的選項卡中。

我把它們放在jsfiddle的更新中。

更新HTML：

<ul class="nav nav-tabs" id="tabFAQ"> 
     <li class="active"><a href="#GQ" data-toggle="tab" state="0">General Questions</a></li> 
     <li><a href="#ICQ" data-toggle="tab" state="0">Insurance Coverage</a></li> 
     <li><a href="#PQ" data-toggle="tab" state="0">Payment</a></li> 
     <li><a href="#FQ" data-toggle="tab" state="0">Forms</a></li> 
     <li><a href="#CQ" data-toggle="tab" state="0">Claims</a></li> 
    </ul> 
    <div class="tab-content" id="faqContent"> 
     <div class="tab-pane active" id="GQ"> 
      <div class="accordion" id="generalQuestions"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseOne">Q. What do I do if I’m having trouble logging in?</a> 
        </div> 
        <div id="collapseOne" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Please contact our Customer Care team at 800-821-7303 for assistance. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseTwo">Q. Will additional online services be added to this portal?</a> 
        </div> 
        <div id="collapseTwo" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes. We will be adding many online services to this portal over the next six months. Please check back often.</div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseThree">Q. What information am I able to access on this portal?</a> 
        </div> 
        <div id="collapseThree" class="accordion-body collapse"> 
         <div class="accordion-inner">A. We currently have the ability to display any premiums that are currently due and allow you to make an immediate one-time payment from your checking account, savings account, Visa or MasterCard. Your payment will be confirmed immediately. Other functions are planned to be added to the portal over the next six months. Check back often. </div> 
        </div> 
       </div> 
       <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> 
     </div> 
     <div class="tab-pane" id="ICQ"> 
      <div class="accordion" id="Div1"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Q. Insurance Coverage question Stub for Later? </a> </div> 
         <div id="Div2" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="PQ"> 
      <div class="accordion" id="accordion3"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseSix">Q. When is my payment actually made to my account? </a> </div> 
         <div id="collapseSix" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Your payment is posted to your account within 24 hours after receipt of the funds. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseSeven">Q. What is a one-time payment? </a> </div> 
         <div id="collapseSeven" class="accordion-body collapse"> 
         <div class="accordion-inner">A. This is a web-based service that enables our customers to make a single payment to pay their insurance premium. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseEight">Q. How do I know my payments are secure? </a> </div> 
         <div id="collapseEight" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Our portal uses encryption software and hardware to protect your information. For more information, view our <a href="#">Privacy Policy</a>. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseNine">Q. Can I use a debit card to make a one-time online payment? </a> </div> 
         <div id="collapseNine" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can use your debit card. Your PIN is not required because this is a PIN-less debit transaction. </div> 
        </div> 
       </div> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapseTen">Q. Can I use a credit card to make a one-time online payment? </a> </div> 
         <div id="collapseTen" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Yes, you can use your Visa or MasterCard credit card to make a payment. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="FQ"> 
      <div class="accordion" id="Div3"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Q. Forms Question Stub for Later? </a> </div> 
         <div id="Div4" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane" id="CQ"> 
      <div class="accordion" id="Div5"> 
       <div class="accordion-group"> 
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Q. Claims Question Stub for Later? </a> </div> 
         <div id="Div6" class="accordion-body collapse"> 
         <div class="accordion-inner">A. Answer stub for later. </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

更新的JavaScript：

$('.expandcollapse').click(function() { 

    var newstate = $(this).attr('state')^1, 
     icon = newstate ? "minus" : "plus", 
     text = newstate ? "Collapse" : "Expand"; 

    $('.nav-tabs').children().each(function(index) { 
     if($(this).hasClass('active')) { 
      var tab = $(this).children(':first'); 
      toggleTab(tab.prop('hash')); 
      tab.attr('state',newstate); 
     } 
    }); 

    $(this).html("<i class=\"icon-white icon-" + icon + "-sign\"></i> " + text +" All"); 

    $(this).attr('state',newstate) 

}); 

$('a[data-toggle="tab"]').on('shown', function (e) { 

    var myState = $(this).attr('state'), 
     state = $('.expandcollapse').attr('state'); 

    if(myState != state) { 
     toggleTab($(this).prop('hash')); 
     $(this).attr('state',state); 
    } 

}) 

function toggleTab(id){ 

    $(id).find('.collapse').each(function() { 
     $(this).collapse('toggle'); 
     }); 

}

來源

2012-12-20 18:21:22 ic3b3rg

感謝您抽出時間來解決這個問題。我按照預期檢查了小提琴的作品。當我實施它時，我會更深入地研究它。偉大的解決方案 –

有趣的怪癖。如果在單擊展開全部之前展開一個元素，則在其他元素打開時關閉。 –

首先，我看到您多次使用同一個錨點（href =「＃collapseOne」），請確保它們都是唯一的以避免任何衝突。

來源

2012-12-19 21:11:45 user1917032

您可以在代碼的特定文本中使用「代碼格式」，以及使你的答案更容易閱讀 – span

我已經做了我的ID的獨特並且仍然遇到同樣的問題 –

Twitter引導程序展開/摺疊全部 - 在引導程序選項卡內

回答

相關問題