Question

我在项目中使用jQuery UI Accordion（不允许一次打开多个项目）。使用手风琴是合适的，因为我通常做只希望一次打开一个面板。

但是，我需要提供一个“全部展开”链接，点击后会切换到“全部折叠”。我不想在这个要求周围自定义几乎相同的手风琴功能，所以我想要一些JS来实现这一目标，同时保持Accordion组件的使用。

问题：在使用jQuery UI“Accordion”组件为标准功能提供支持的同时，需要使用哪些JavaScript / jQuery？

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

Answer 1

在jQuery UI论坛中

As discussed，您不应该使用手风琴。

如果你想看起来像手风琴一样的东西，那很好。使用他们的类来设置它们的样式，并实现您需要的任何功能。然后添加一个按钮来打开或关闭它们都非常简单。 Example

<强> 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>

推出自己的手风琴

大多数情况下，我们只需要手风琴标题来切换以下兄弟的状态，这是它的内容区域。我们还添加了两个自定义事件“show”和“hide”，我们将在稍后介绍。

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

“全部打开”时交换按钮

感谢我们定制的“show”和“hide”事件，我们可以在面板发生变化时收听。唯一的特殊情况是“它们都打开”，如果是，按钮应该是“全部折叠”，如果不是，则应该“全部展开”。

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个面板打开”，除非您点击“全部展开”按钮实际上要容易得多。 Example

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-multi-open-accordion，可能会帮到你

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

使用关于泰丰的例子，我修改为允许展开和折叠。

... //挂钩展开/全部折叠

<script>
function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    source = $('#tab_customers')[0];
    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 70,
        width: 800
    };
    pdf.fromHTML(
        source,
        margins.left,
        margins.top, {
            'width': margins.width,
            'elementHandlers': specialElementHandlers
        },

        function (dispose) {
            pdf.save('Test.pdf');
        }, margins);
}

Answer 13

我尝试了老式的版本，只是像许多这些较旧的答案一样调整aria- *和CSS属性，但最终放弃了，只是做了一个有条件的假点击。变得漂亮'：

HTML：

<a href="#" onclick="expandAll();"
  title="Expand All" alt="Expand All"><img
    src="/images/expand-all-icon.png"/></a>
<a href="#" onclick="collapseAll();"
  title="Collapse All" alt="Collapse All"><img
    src="/images/collapse-all-icon.png"/></a>

Javascript：

async function expandAll() {
  let heads = $(".ui-accordion-header");
  heads.each((index, el) => {
    if ($(el).hasClass("ui-accordion-header-collapsed") === true)
      $(el).trigger("click");
  });
}

async function collapseAll() {
  let heads = $(".ui-accordion-header");
  heads.each((index, el) => {
    if ($(el).hasClass("ui-accordion-header-collapsed") === false)
      $(el).trigger("click");
  });
}

（HTML换行符位于怪异的位置，以防止演示文稿中出现空格。）

Answer 14

如果您认为每个面板都是独立的，那么只需将每个面板放在自己的手风琴中即可：

$(".accordion-panel").accordion({
            collapsible: true,
            multiple: true,
            active: 0
});

然后在 html 中，您可以将每个部分创建为自己的手风琴。

<div class="accordion-panel">
<h3 class="accordion-header">Section 1</h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
</div>
<div class="accordion-panel">
<h3 class="accordion-header">Section 2</h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
</div>

jQuery UI Accordion展开/折叠全部

14 个答案: