如何使用Adi Palaz的嵌套Accordion展开/折叠所有

Question

Adi Palaz's Nested Accordion

这看起来应该很简单，但我似乎不能弄明白这一点，在四个小时没有解决方案后，我一直坐在这里把头撞在我的桌子上。

在页面上的演示中，您会注意到有展开所有/折叠所有按钮，这些按钮触发了打开或关闭所有折叠面板的功能。

我不想用那些按钮。我想要编写自己的函数，并在用户在页面上其他位置的DIV上完成一个手势后，触发expand all或function函数。

但我似乎想不出如何调用作者在按钮上使用的相同函数来正确地展开和折叠折叠面板。

如果有帮助，我设置了一个测试页面：http://dl.dropbox.com/u/22224/Newfolder/nested_accordion_demo3.html

下面是它工作所需的两个脚本：

Nested Accordion Script

Expand.js

请帮帮我！我很绝望，作者没有回复电子邮件！

Answer 1

我能够用下面的代码解决展开/折叠所有的问题，希望它也能为你工作。

function expand(id) {
    var o = $.extend({}, $.fn.accordion.defaults, null);
    var containerID = o.container ? id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : id, El = Obj + ' ' + o.el, hTimeout = null;
    $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).show().closest(o.wrapper).find('a.trigger').addClass('open').data('state', 1);
}

function collapse(id) {
    var o = $.extend({}, $.fn.accordion.defaults, null);
    var containerID = o.container ? id : '', objID = o.objID ? o.objID : o.obj + o.objClass, Obj = o.container ? containerID + ' ' + objID : id, El = Obj + ' ' + o.el, hTimeout = null;
    $(El + ' a.trigger').closest(o.wrapper).find('> ' + o.next).not('.shown').hide().closest(o.wrapper).find('a.open').removeClass('open').data('state', 0);
}

Example:

expand('#accordion1');
collapse('#accordion1');

Answer 2

我也面临着同样的问题，我想知道你是否找到了答案？

我计划使用的变通方法是$('.accordion a').click()；以编程方式单击列表中的每个链接-虽然不是很好，但似乎很有效……

Answer 3

两年后，我也有同样的愿望。使用Adi Palaz嵌套的accordion，但有我自己的样式和特定的操作展开/折叠所有按钮。我最终让它以我想要的方式工作，尽管我承认我是一个新手级别的jquery程序员。以下是我的主要学习：

• 我从示例nested_accordion_demo5.html开始，使用#acc1示例。我根本没有使用expand.js，我从来没有让它工作过。
• 我更改了我的demo5.html中的默认函数，添加了expand.js：“div”。

​

  $("#acc1").accordion({
      obj: "div",
      el: ".h", 
      head: "h4, h5", 
      next: "div", 
      iconTrigger: true
  });

​

• 然后我在整个ul结构周围添加了一个带有class=" accordion“的div，并从ul中删除了accordion类。
• 我创建了自己的两个展开/折叠链接，并将它们放在div内但在ul之前。后来，我变得花哨起来，并添加了样式，使它们看起来像按钮，但首先我让它起作用了。

​

<a href="#" class="ExpandAll">[Expand All]</a>&nbsp;<a href="#" class="CollapseAll">[Collapse All]</a>

​

• ，然后我使用处理a.trigger事件的代码片段向jquery.nestedAccordion.js添加了两个新的独立事件处理程序。我把它们放在现有的事件处理程序后面。这是我的新CollapseAll:

​

$(Obj).delegate('a.CollapseAll', ev, function(ev) {										
	$( o.obj + o.objClass ).find('a.trigger').each(function() {
		var $thislink = $(this), $thisWrapper = $thislink.closest(o.wrapper), $nextEl = $thisWrapper.find('> ' + o.next);
		if (($nextEl).length && $thislink.data('state') && (o.collapsible)) {	 
			$thislink.removeClass('open');
			$nextEl.filter(':visible')[o.hideMethod](o.hideSpeed, function() {$thislink.data('state', 0);});
		}
	}); 		
}); 

​

然后，我创建了第二个事件处理程序，它执行ExpandAll。

我知道这可能会更有效率，但我很高兴至少考虑到我的技能水平，它可以工作！