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

How to Expand All/Collapse All Using Adi Palaz's Nested Accordion

本文关键字：折叠 手风琴 Adi 何使用 Palaz 嵌套      更新时间：2023-09-26

Adi Palaz's Nested Accordion

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

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

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

但是我似乎无法弄清楚如何调用作者在按钮上使用的相同函数来正确展开和折叠手风琴面板.

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

以下是它需要工作的两个脚本：

嵌套手风琴脚本

展开.js

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

我能够使用以下代码解决展开/折叠所有问题，希望它也适用于您。

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

我遇到了完全相同的问题，想知道您是否找到了答案？

我计划使用的解决方法类似于 $('.accordion a'(.click((; 以编程方式单击列表中的每个链接 - 不漂亮，但它似乎有效...

两年后，我也有同样的愿望......使用阿迪帕拉兹嵌套手风琴， 但有我自己的风格和特定动作展开/折叠所有按钮.我终于让它按照我想要的方式工作，尽管我承认我是一个新手级别的jquery程序员。以下是我的主要收获：

  • 我从示例开始nested_accordion_demo5.html #acc1例。我没有使用扩展.js根本没有，我永远无法让它工作。
  • 我更改了演示中的函数默认值5.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>

  • 然后，我向 jquery.nestedAccordion 添加了两个新的独立事件处理程序.js使用处理 a.trigger 事件的片段。我将它们紧跟在现有事件处理程序之后。这是我的新 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 的事件处理程序。

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

相关文章：