一次展开或折叠所有div元素

Question

我正在使用Twitter Bootstrap CSS和JS框架。在这个例子中，我有四个可折叠的div。

当我打开一个div时，如果我点击展开所有按钮，则已打开的div会自动关闭。

我希望能够同时展开所有div。

例如，如果#about已经打开，并且用户点击“展开所有”按钮，则它应该显示所有内容，包括#about。

有没有简单的方法来实现这一点？

以下是代码：

<section id="accordion">
  <a href="#_" class="expandcollapse btn btn-mini btn-primary pull-right" state="0"><i class='icon-white icon-plus-sign'></i> Expand All</a>
    <ul class="nav nav-tabs" id="tabFAQ">
       <li class="active"><a href="#GQ" data-toggle="tab" state="0">Subscriptions</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 clearfix">
                <label class="checkbox pull-left accordion-margin">         
                    <input type="checkbox" id="Tactial">
                </label>          
                <a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category1">5.11 Tactial<i class="icon-ok-sign success-color"></i>
                </a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" rel="tooltip" data-placement="right" href="#">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category1" class="head-height">&nbsp;</div>


            </div><!--/accordion-heading-->
            <div id="category1" class="accordion-body collapse">
              <ul class="accordion-inner unstyled">
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Women">

                    <a href="">Women</a>
                </li>
                <li id="" class="sidelink clearfix">

                        <input type="checkbox" id="Customer-Is-Anonymous">

                    <a href="">Men</a>
                </li>
              </ul>
            </div><!--/Apparel End-->
          </div>
          <div class="accordion-group">
            <div class="accordion-heading clearfix">
                <label class="checkbox pull-left accordion-margin">         
                        <input type="checkbox" id="Juary" class="regular-checkbox"><label for="Juary"></label>
                </label>
                <a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category2">Juary</a>
                <span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
                <div data-toggle="collapse" data-parent="#parent" href="#category2" class="head-height">&nbsp;</div>

            </div><!--/accordion-heading-->
             <div id="category2" class="accordion-body collapse">
              <ul class="accordion-inner unstyled">
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Furniture">
                <a href=""> Furniture (Subscribed) </a>
                </li>
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Accessories">
                <a href="">Home Accessories</a>
                </li>
              </ul>
            </div>

          </div>
          <div class="accordion-group">
            <div class="accordion-heading clearfix">
                <label class="checkbox pull-left accordion-margin">         
                        <input type="checkbox" id="Dickies" class="regular-checkbox"><label for="Dickies"></label>
                </label>
                <a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category3">Dickies</a>
                <span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
                <div data-toggle="collapse" data-parent="#parent" href="#category3" class="head-height">&nbsp;</div>

            </div><!--/accordion-heading-->
             <div id="category3" class="accordion-body collapse">
              <ul class="accordion-inner unstyled">
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Shoe">
                <a href="">Shoe</a>
                </li>
                <li id="" class="sidelink clearfix">    
                        <input type="checkbox" id="Swaters">
                <a href="">Swaters</a>
                </li>
              </ul>
            </div>

          </div>
          <div class="accordion-group">
            <div class="accordion-heading clearfix">
                <label class="checkbox pull-left accordion-margin">         
                        <input type="checkbox" id="Puma" class="regular-checkbox"><label for="Puma"></label>
                </label>
                <a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category4">Puma</a>
                <span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
             <div data-toggle="collapse" data-parent="#parent" href="#category4" class="head-height">&nbsp;</div>   

            </div><!--/accordion-heading-->
             <div id="category4" class="accordion-body collapse">
              <ul class="accordion-inner unstyled">
                <li id="" class="sidelink clearfix">        
                        <input type="checkbox" id="Appearel">
                <a href="">Appearel</a>
                </li>
                <li id="" class="sidelink clearfix">
                        <input type="checkbox" id="Sports">
                <a href=""> Sports</a>
                </li>
                <li id="" class="sidelink clearfix">
                        <input type="checkbox" id="Spickes">
                <a href=""> Red Spickes Shoe</a>
                </li>
                <li id="" class="sidelink clearfix">
                        <input type="checkbox" id="Soccer">
                <a href=""> Soccer Shoe</a>
                </li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </div>
        </section>


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

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

    }

- user1931424

---

经过检查您的代码，切换操作还有另一个问题。如果您手动打开所有手风琴直到全部打开。然后，如果您按“展开全部”，它们将全部关闭:D - Ignacio Correia

我的建议是将按钮分为两个：展开全部和关闭全部。并且使用toggle.fade效果来实现按钮切换。你觉得怎么样？ - Ignacio Correia

Answer 1

关键是使用树遍历来查找相关的手风琴(divs)，然后折叠仅已展开的部分(或者根据您的"状态"标志显示已折叠的部分)。

请参见http://jsfiddle.net/jhfrench/mc4Qd/以了解您要执行的操作的实际示例。

几个注意事项：

• 我编写了可重用的解决方案，以便您可以拥有包含与该部分(或div，例如第三个块)中的手风琴进行交互的展开/折叠按钮的多个部分：

  $(this).siblings('div').find( ...
  

• 我们不想滥用显示所有div.accordion-body，因为那将重新激活已经显示的块。 JQuery的 "not selector" (:not(.in)) 就派上用场:

  find('div.accordion-body:not(.in)').collapse('show');
  

• 我们不想滥用隐藏所有的 div.accordion-body，因为那将重新激活已经隐藏的块。因此，我们将查找同时是 .accordion-body 和 .in 的 div（'div.accordion-body.in'；感谢Sasha Chedygov的帮助）：

  find('div.accordion-body.in').collapse('hide');
  

- Jeromy French

Answer 2

尝试这个：http://www.bootply.com/peFUdnwOpZ 它应该可以帮助你找到你想要的。

- Preeti

---

请在您的回答中包含代码，因为链接可能无法供所有人使用。 - Sarah Elan