jquery - 一次展开折叠所有 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');
          });

    }

Answer 1

关键是使用树遍历来查找相关的折叠式 div，然后仅折叠展开的部分(或根据您的“状态”标志显示折叠的部分) .

参见http://jsfiddle.net/jhfrench/mc4Qd/获取您正在尝试执行的操作的示例。

一些注意事项:

• 我编写了可重用的解决方案，以便您可以拥有多个包含与交互的展开/折叠按钮的部分该部分(或 div，如第三 block )内的 Accordion :

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

• 我们不想不加区别地显示所有 div.accordion-body，因为这会(重新)对已显示的 block 进行动画处理。 JQuery 的“not selector ”(:not(.in))可以解决这个问题:

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

• 我们不想不加区别地隐藏所有 div.accordion-body，因为这会(重新)对已经隐藏的 block 进行动画处理。因此，我们将查找同时为 .accordion-body 和 .in ('div.accordion-body.in '；向 Sasha Chedygov 寻求帮助):

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