Question

Adi Palaz's Nested Accordion

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

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

我不想使用这些按钮。我想编写自己的函数并激活expand all或者在用户在页面上的其他位置完成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程序员。这是我的主要经验：

我从示例nested_accordion_demo5.html开始使用＃acc1 例。我根本没有使用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>&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的事件处理程序。

我知道这可能会更有效率，但我很高兴至少让它在我的技能水平下工作！

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

3 个答案: