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引导程序展开/折叠全部 - 在引导程序选项卡内

回答

相关问题