Twitter Bootstrap 展开/折叠全部 - 在Bootstrap选项卡中

Question

Twitter Bootstrap 展开/折叠全部 - 在Bootstrap选项卡中

4

我正在使用Twitter Bootstrap的标签页来容纳每个标签页内的FAQ手风琴。需求是为每个标签页添加一个展开/折叠所有按钮，以展开/折叠答案。目前，我已经成功地为第一个加载的标签页设置了展开/折叠按钮。但是，当我点击另一个标签页并执行相同的按钮时，它不起作用。当我回到最初的标签页时，它也不再起作用。

这里是 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()函数，希望它们即使在初始加载时也能切换。

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

- Jon Harding

2个回答

6

首先，我看到您多次使用相同的锚点（href="#collapseOne"），请确保这些锚点都是唯一的，以避免任何冲突。

- user1917032

你也可以对代码相关的文本使用“代码格式化”，以使你的答案更易于阅读。 - span

我已经将我的ID设置为唯一的，但仍然遇到相同的问题。 - Jon Harding

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ic3b3rg · Accepted Answer

有两个问题：

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

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');
      });

}