如何使用 Adi Palaz 的嵌套手风琴展开全部/折叠全部

Question

Adi Palaz's Nested Accordion

这似乎应该很简单，但我似乎无法弄清楚这一点，在没有解决方案的四个小时后，我一直坐在这里，头撞在桌子上。

您会在页面上的演示中注意到，有展开全部/折叠所有按钮可触发打开或关闭所有手风琴面板的功能。

我不想使用这些按钮。我想编写自己的函数并在用户在页面其他位置的 DIV 上完成手势后触发全部展开或全部折叠函数。

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

如果有帮助，我会设置一个测试页面来玩： 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 嵌套手风琴，但让我的 OWN 风格和特定动作展开/折叠所有按钮。尽管我承认我是一个新手级别的 jquery 程序员，但我最终还是让它按照我想要的方式工作。这是我的主要经验：

• 我从带有#acc1 的示例nested_accordion_demo5.html 开始 例子。我根本没有使用 expand.js，我永远无法使用它 工作。
• 我在 demo5.html 中更改了函数默认值以添加 obj:"div"。

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

• 然后我在整个 ul 结构周围添加了一个 class="accordion" 的 div，并从 ul 中删除了手风琴类。
• 我自己制作了两个展开/折叠链接，并将它们放在 div 内但在 ul 之前。后来我很喜欢并添加了样式，使它们看起来像按钮，但首先我得到了它的工作。

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

• 然后，我使用处理 a.trigger 事件的 sn-ps 向 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。

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