jQuery UI手风琴展开/折叠全部

我正在使用jQuery UI Accordion （一次不允许打开多个项目）。 使用手风琴是适当的，因为我通常只需要一次打开一个面板。

但是，我需要提供一个“全部展开”链接，点击时切换到“全部折叠”。 我不想自定义围绕这个要求编写几乎相同的手风琴function，所以我希望一些JS能够实现这一点，同时保持Accordion组件的使用。

问题：为了实现这个function，还需要使用JavaScript / jQuery，而仍然使用jQuery UI“Accordion”组件来支持标准function？

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

Answer 1

正如在jQuery UI论坛中所讨论的那样，您不应该为此使用手风琴。

如果你想看起来像手风琴一样的东西，那很好。 使用他们的类来devise它们，并实现你需要的任何function。 然后添加一个button来打开或closures它们都非常简单。 例

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标志来标记button何时被改变，这可以很容易地成为一个类或一个更大的插件框架上的状态variables。

 expandLink.click(function(){ var isAllOpen = $(this).data('isAllOpen'); contentAreas[isAllOpen? 'hide': 'show']() .trigger(isAllOpen? 'hide': 'show'); }); 

当“全部打开”时交换button

感谢我们自定义的“显示”和“隐藏”事件，当面板改变时，我们有一些东西要听。 唯一的特例是“它们全部打开”，如果是的话，button应该是“全部折叠”，否则应该是“全部展开”。

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

编辑注释：除非您点击“全部展开”button，否则维持“仅打开1个面板”实际上要容易得多。 例

Answer 2

这我的解决scheme：

在实际项目中工作。

  $(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

最后，我发现这是考虑要求的最佳解决scheme：

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

Answer 5

我不相信你可以用手风琴来做到这一点，因为它是专门devise的，最多可以打开一件物品。 然而，即使你说你不想重新实施手风琴，你也可能过于估计所涉及的复杂性。

考虑下面的场景，你有一个垂直的元素堆栈，

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

如果你懒惰，你可以使用表格来build立它，否则，适当样式的DIV也可以工作。

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

要展开所有项目，只需使用$(".itemBlock").show()或者如果你想animation， $(".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"); }); } }); }; 

在您的用户界面页面中引用它，并调用类似于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

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

它将允许您根据您的要求定制它。 它将具有展开/折叠function。

url： http ： //accordion-cd.blogspot.com/

Answer 11

我发现AlecRust的解决scheme相当有帮助，但我添加了一些东西来解决一个问题：当你点击一个手风琴展开它，然后你点击button展开，它们都将被打开。 但是，如果再次点击button来折叠，单手风琴之前的展开将不会崩溃。

我用过imageButton，但是你也可以把这个逻辑应用到button上。

 /*** 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

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

… //将所有展开/折叠挂钩

 var expandLink = $('.accordion-expand-all'); expandLink.click(function () { $(".ui-accordion-content").toggle(); });