jQuery UI的手风琴展开/收起所有(jQuery UI Accordion Expand/Co

我使用jQuery UI的手风琴上的一个项目（ 不允许在同一时间多个项目开放 ）。 利用手风琴，因为我平时只需要一次一个打开的面板是适当的。

不过，我需要提供一个“全部展开”链接，切换到“全部折叠”单击时。 我不想编写自定义围绕这一要求近乎相同手风琴的功能，所以我想一些JS将实现这一目标，同时保持Accordion组件使用。

问：的JavaScript /需要什么jQuery来实现这一目标，同时仍然使用jQuery UI“手风琴”组件提供动力的标准功能？

这里有一个小提琴： http://jsfiddle.net/alecrust/a6Cu7/

Answer 1:

随着讨论的jQuery UI的论坛，你不应该使用这个手风琴。

如果你想要的东西，看起来就像一个手风琴，这是罚款。 用自己的类他们的风格，并实现你需要的任何功能。 然后添加一个按钮，打开或关闭它们全部是非常简单的。 例

HTML

通过使用jQuery UI类，我们保持我们的手风琴看着就像“真正的”手风琴。

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 1
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        Content 1
    </div>
</div>​

滚你自己的手风琴

主要是我们只希望手风琴头切换以下的兄弟姐妹，这是它的内容区域的状态。 我们还增加了两个自定义事件“显示”和“隐藏”，我们将钩到更高版本。

var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');

headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');

    // open or close as necessary
    panel[isOpen? 'slideUp': 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen? 'hide': 'show');

    // stop the link from causing a pagescroll
    return false;
});

展开/全部折叠

我们使用布尔isAllOpen标志当按钮已被更改为标记，这可以很容易地是一个类，或者一个更大的插件框架的状态变量。

expandLink.click(function(){
    var isAllOpen = $(this).data('isAllOpen');

    contentAreas[isAllOpen? 'hide': 'show']()
        .trigger(isAllOpen? 'hide': 'show');
});

SWAP按钮时，“全部打开”

感谢我们的自定义“显示”和“隐藏”的事件，我们有话要听，当面板正在改变。 唯一的特例是“他们是所有打开的”，如果是按钮应该是一个“关闭全部”，如果不是它应该是“全部展开”。

contentAreas.on({
    // whenever we open a panel, check to see if they're all open
    // if all open, swap the button to collapser
    show: function(){
        var isAllOpen = !contentAreas.is(':hidden');   
        if(isAllOpen){
            expandLink.text('Collapse All')
                .data('isAllOpen', true);
        }
    },
    // whenever we close a panel, check to see if they're all open
    // if not all open, swap the button to expander
    hide: function(){
        var isAllOpen = !contentAreas.is(':hidden');
        if(!isAllOpen){
            expandLink.text('Expand all')
            .data('isAllOpen', false);
        } 
    }
});​

编辑发表评论：维持“1个面板只开放”，除非你点击“全部展开”按钮实际上是容易得多。 例

Answer 2:

这是我的解决方案：

在实际项目。

   $(function () {
    $("#accordion").accordion({collapsible:true, active:false});
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
        $(this).hide();
        $('.close').show();
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
        $(this).hide();
        $('.open').show();
    });
    $('.ui-accordion-header').click(function () {
        $('.open').show();
        $('.close').show();
    });
});

http://jsfiddle.net/bigvax/hEApL/

Answer 3:

很多这些似乎过于复杂。 我实现了我想要的东西只有以下几点：

$(".ui-accordion-content").show();

的jsfiddle

Answer 4:

最后，我发现这是考虑到需求的最佳解决方案：

// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
    $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
    $(this).toggleClass('collapse');
    return false;
});

更新的jsfiddle链接： http://jsfiddle.net/ccollins1544/r8j105de/4/

Answer 5:

我不相信你可以用手风琴做到这一点，因为它是专门保留顶多一个项目将被打开的属性。 但是，即使你说你不想重新实现手风琴，你可能超过估计涉及的复杂性。

考虑以下情况，你有元素的垂直堆叠，

++++++++++++++++++++
+     Header 1     +
++++++++++++++++++++
+                  +
+      Item 1      +
+                  +
++++++++++++++++++++
+     Header 2     +
++++++++++++++++++++
+                  +
+      Item 2      +
+                  +
++++++++++++++++++++

如果你懒，你可以建立这个使用表，否则，适当风格的DIV也会起作用。

每个项目的块可以有一类itemBlock 。 点击一个标题会造成类itemBlock的所有元素被隐藏（ $(".itemBlock").hide() 然后，您可以使用jQuery的slideDown()函数来扩展标题下的项目。 现在，你已经差不多实现手风琴。

要展开所有的项目，只需使用$(".itemBlock").show()或者如果你想它的动画， $(".itemBlock").slideDown(500) 要隐藏的所有项目，只需使用$(".itemBlock").hide()

Answer 6:

下面是由代码Sinetheta转换为jQuery插件：保存下面的代码到一个js文件。

$.fn.collapsible = function() {
    $(this).addClass("ui-accordion ui-widget ui-helper-reset");
    var headers = $(this).children("h3");
    headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
    headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
    headers.click(function() {
        var header = $(this);
        var panel = $(this).next();
        var isOpen = panel.is(":visible");
        if(isOpen)  {
            panel.slideUp("fast", function() {
                panel.hide();
                header.removeClass("ui-state-active")
                    .addClass("ui-state-default")
                    .children("span").removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-triangle-1-e");
          });
        }
        else {
            panel.slideDown("fast", function() {
                panel.show();
                header.removeClass("ui-state-default")
                    .addClass("ui-state-active")
                    .children("span").removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-triangle-1-s");
          });
        }
    });
}; 

请参阅它在你的UI页面，并呼吁类似jQuery的手风琴电话：

$("#accordion").collapsible(); 

看起来更清洁，避免任何类都被添加到标记。

Answer 7:

试试这个jQuery的多开放式手风琴 ，可以帮助你

Answer 8:

我第二bigvax意见的前面，但你需要确保你添加

        jQuery("#jQueryUIAccordion").({ active: false,
                              collapsible: true });

否则，你将无法倒塌他们之后打开第一手风琴。

    $('.close').click(function () {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
    $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
   }

Answer 9:

Yes, it is possible. Put all div in separate accordion class as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

        $(function () {
            $("input[type=submit], button")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
            $("#tabs").tabs();
            $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0



            });
        });

function expandAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0

            });

            return false;   
}

function collapseAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: false



            });
            return false;
}
</script>



<div class="accordion">
  <h3>Toggle 1</h3>
  <div >
    <p>text1.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 2</h3>
  <div >
    <p>text2.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 3</h3>
  <div >
    <p>text3.</p>
  </div>
</div>

Answer 10:

你可以试试这个轻量级的小插件。

它可以让你定制按您的要求。 这将有展开/折叠功能。

网址： http://accordion-cd.blogspot.com/

Answer 11:

我发现AlecRust的解决方案非常有帮助的，但我添加的东西来解决一个问题：当你在一个单一的手风琴单击展开它，然后你点击按钮展开，他们都将被打开。 但是，如果你在按钮上再次单击崩溃，单手风琴之前扩大不会崩溃。

我用的ImageButton，但你也可以应用逻辑按钮。

/*** Expand all ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown();

    return false;
});

/*** Collapse all ***/
$(".collapseAll").click(function (event) {
    $('.accordion').accordion({
        collapsible: true,
        active: false
    });

    $('.accordion .ui-accordion-header').next().slideUp();

    return false;
});

此外，如果你有一个手风琴内手风琴，你想都仅在第二个层次展开，您可以添加一个查询：

/*** Expand all Second Level ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown();

    return false;
});

Answer 12:

使用有关TAIFUN一个例子，我修改，以便展开和折叠。

... //挂钩的展开/折叠所有

var expandLink = $('.accordion-expand-all');

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});

文章来源: jQuery UI Accordion Expand/Collapse All