4

我正在使用 Twitter Bootstrap 的选项卡在每个选项卡中保存一个手风琴的常见问题解答。要求是每个展开/折叠答案的选项卡都有一个展开/折叠所有按钮。我目前的展开/折叠按钮在加载的第一个选项卡上正常工作。但是，当我单击另一个选项卡并执行相同的按钮时，它不起作用。当我单击返回加载的初始选项卡时，它也不再起作用。

这是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() 函数，希望即使最初没有加载它们也会切换。

有人可以帮我检测为什么在选择选项卡时按钮停止工作吗？

4

2 回答 2

6

首先，我看到您多次使用同一个锚 (href="#collapseOne")，请确保它们都是唯一的以避免任何冲突。

于 2012-12-19T21:11:45.530 回答
6

有两个问题：

1) Bootstrap 使用 scrollHeight 来转换 .collapse div 的高度，但是当元素不显示时，scrollHeight 始终为 0；单击全部展开按钮时，无法正确设置隐藏选项卡中 .collapse div 的高度。

2) ontransitionend 事件不会在未显示的元素上触发。Bootstrap 在其折叠方法中设置了一个标志（过渡），该标志在 ontransitionend 中重置，但是从未为未显示的元素触发 ontransitionend。单击全部展开按钮后，Bootstrap 会认为所有未显示的 .collapse div 都处于过渡状态，并且随后对这些 div 的 collapse 方法的每次调用都会短路。

由于您无法控制这些问题中的任何一个，因此需要做的是仅在单击展开/折叠所有按钮时折叠活动选项卡的 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-20T18:21:22.973 回答