Twitter引导程序展开/全部展开 – 在引导程序选项卡中
我正在使用Twitter Bootstrap的标签在每个标签中保存一个FAQ的手风琴。 要求是为每个选项卡展开/折叠所有按钮以扩展/折叠答案。 我目前有扩展/折叠按钮正常加载第一个选项卡。 但是，当我单击另一个选项卡并执行相同的按钮时，它不起作用。 当我单击返回加载的初始选项卡时，它也不再有效。
这是jsfiddle
HTML下面
A. Please contact our Customer Care team at 800-821-7303 for assistance. A. Yes. We will be adding many online services to this portal over the next six months. Please check back often. 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. 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. A. Yes, but I have no idea how right now. A. Answer stub for later. A. Your payment is posted to your account within 24 hours after receipt of the funds. A. This is a web-based service that enables our customers to make a single payment to pay their insurance premium. A. Our portal uses encryption software and hardware to protect your information. For more information, view our Privacy Policy. A. Yes, you can use your debit card. Your PIN is not required because this is a PIN-less debit transaction. A. Yes, you can use your Visa or MasterCard credit card to make a payment. A. Answer stub for later. A. Answer stub for later. 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() == " Expand All") { $(this).html(" Collapse All"); } else { $(this).html(" Expand All"); }; });
}）;
我想知道是不是因为在最初加载页面时没有在DOM中加载其他选项卡内容。 所以我使用了jquery .each（）函数，希望即使它们最初没有加载也会切换。
当有人选中标签时，有人可以帮助我检测按钮停止工作的原因吗？
有两个问题：
1）Bootstrap使用scrollHeight转换.collapse div的高度，但是当没有显示元素时scrollHeight始终为0; 单击“全部展开”按钮时，无法正确设置隐藏选项卡中.collapse div的高度。
2）ontransitionend事件不会触发未显示的元素。 Bootstrap在其折叠方法中设置一个标志（转换），该方法在ontransitionend中重置，但是ontransitionend永远不会为未显示的元素触发。 单击“全部展开”按钮后，Bootstrap会认为所有未显示的.collapse div都处于转换状态，并且每次对这些div的折叠方法的后续调用都会被短路。
由于您无法控制其中任何一个问题，因此需要做的是仅在单击“展开/折叠全部”按钮时折叠活动选项卡的div，并在选项卡中更新选项卡中div的折叠设置时活性。
我把它放在你的jsfiddle的更新中。
更新的HTML：
A. Please contact our Customer Care team at 800-821-7303 for assistance. A. Yes. We will be adding many online services to this portal over the next six months. Please check back often. 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. 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. A. Yes, but I have no idea how right now. A. Answer stub for later. A. Your payment is posted to your account within 24 hours after receipt of the funds. A. This is a web-based service that enables our customers to make a single payment to pay their insurance premium. A. Our portal uses encryption software and hardware to protect your information. For more information, view our Privacy Policy. A. Yes, you can use your debit card. Your PIN is not required because this is a PIN-less debit transaction. A. Yes, you can use your Visa or MasterCard credit card to make a payment. A. Answer stub for later. A. Answer stub for later.
更新的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(" " + 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'); }); }
首先，我看到你多次使用同一个锚（href =“＃collapseOne”），确保这些都是唯一的以避免任何冲突。