Как Развернуть Все / Свернуть Все Используя Вложенный Аккордеон Ади Палаза - PullRequest
Новая
       8

Как Развернуть Все / Свернуть Все Используя Вложенный Аккордеон Ади Палаза

1 голос
/ 20 марта 2012

Вложенный аккордеон Ади Палаза

Кажется, это должно быть просто, но я не могу понять это, и я сидел здесь, хлопнув головой по столу примерно четыре часа без решения.

В демоверсии на странице вы заметите, что есть кнопки «Развернуть все / Свернуть все», которые запускают функцию, чтобы открыть все панели аккордеона или закрыть их.

Я не хочу использовать эти кнопки. Я хочу написать свою собственную функцию и запустить функцию «развернуть все» или «свернуть все» после того, как пользователь завершит жест в DIV где-нибудь еще на странице.

Но я не могу понять, как вызвать ту же функцию, которую автор использует для кнопок, чтобы правильно развернуть и свернуть панели аккордеона.

Если это поможет, я настроил тестовую страницу для игры: http://dl.dropbox.com/u/22224/Newfolder/nested_accordion_demo3.html

А вот два сценария, которые ему нужны для работы:

Вложенный Аккордеонный Скрипт

Expand.js

Пожалуйста, помогите! Я в отчаянии, и автор не отвечает на электронные письма!

Ответы [ 3 ]

1 голос
/ 06 июля 2013

Мне удалось решить проблему с развертыванием / свертыванием с помощью следующего кода, надеюсь, он будет работать и для вас. 

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');
0 голосов
/ 09 октября 2014

Два года спустя, и у меня такое же желание ... использовать вложенный аккордеон Adi Palaz, но мой собственный стиль и специфическое действие развернуть / свернуть все кнопки.Я, наконец, заставил его работать так, как мне хотелось, хотя я, по общему признанию, программист 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
  });
  • Затем я добавил div с class = "accordion" вокруг всей структуры ul и удалил класс аккордеона из ul.
  • Iсделал две свои собственные ссылки на развёртывание / сворачивание и поместил их в 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.

Я знаю, что это может быть гораздо более эффективным, ноЯ взволнован, по крайней мере, чтобы это работало, учитывая мой уровень квалификации!

0 голосов
/ 17 октября 2012

Я столкнулся с точно такой же проблемой и хотел бы знать, нашли ли вы когда-нибудь ответ?

Обход, который я планирую использовать, похож на $ ('. Accordion a'). Click();программно нажимать на каждую ссылку в списке - не красиво, но, похоже, работает ...

...