JQuery UI Accordion Развернуть / Свернуть все

Я использую JQuery UI Accordion (который не позволяет одновременно открывать более одного элемента ) в проекте. Использование аккордеона является подходящим, так как обычно я хочу, чтобы одна панель открывалась одновременно.

Однако мне нужно предложить ссылку «Развернуть все», которая переключается на «Свернуть все» при нажатии. Я не хочу настраивать почти идентичные функции аккордеона вокруг этого единственного требования, поэтому я бы хотел, чтобы какой-то JS достиг этого, сохраняя при этом компонент Аккордеон.

Вопрос: Какой JavaScript / jQuery требуется для достижения этой цели, в то же время используя компонент jQuery UI «Accordion» для питания стандартных функций?

Вот скрипка: http://jsfiddle.net/alecrust/a6Cu7/

Как обсуждалось в форумах jQuery UI, вы не должны использовать для этого аккордеоны.

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

HTML

Используя классы jquery-ui, мы сохраняем наши аккордеоны похожими на «настоящие» аккордеоны.

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset"> <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"> <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> Section 1 </h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> Content 1 </div> </div>​ 

Сверните свои собственные аккордеоны

В основном мы просто хотим, чтобы заголовки аккордеона переключали состояние следующего брата, который является его областью содержимого. Мы также добавили два пользовательских события «показать» и «скрыть», которые мы подключим позже.

 var headers = $('#accordion .accordion-header'); var contentAreas = $('#accordion .ui-accordion-content ').hide(); var expandLink = $('.accordion-expand-all'); headers.click(function() { var panel = $(this).next(); var isOpen = panel.is(':visible'); // open or close as necessary panel[isOpen? 'slideUp': 'slideDown']() // trigger the correct custom event .trigger(isOpen? 'hide': 'show'); // stop the link from causing a pagescroll return false; }); 

Развернуть / Свернуть все

Мы используем флаг boolean isAllOpen для отметки, когда кнопка была изменена, это также может быть просто класс или переменная состояния в более крупной плагиновой структуре.

 expandLink.click(function(){ var isAllOpen = $(this).data('isAllOpen'); contentAreas[isAllOpen? 'hide': 'show']() .trigger(isAllOpen? 'hide': 'show'); }); 

Поменяйте кнопку, когда "все открыто"

Благодаря нашим обычным событиям «показать» и «скрыть» у нас есть, что слушать, когда панели меняются. Единственный частный случай – «все они открыты», если да, кнопка должна быть «Свернуть все», если не должна быть «Развернуть все».

 contentAreas.on({ // whenever we open a panel, check to see if they're all open // if all open, swap the button to collapser show: function(){ var isAllOpen = !contentAreas.is(':hidden'); if(isAllOpen){ expandLink.text('Collapse All') .data('isAllOpen', true); } }, // whenever we close a panel, check to see if they're all open // if not all open, swap the button to expander hide: function(){ var isAllOpen = !contentAreas.is(':hidden'); if(!isAllOpen){ expandLink.text('Expand all') .data('isAllOpen', false); } } });​ 

Редактировать для комментариев: Поддержание «1 панель открыта только», если вы не нажмете кнопку «Развернуть все», на самом деле намного проще. пример

Это мое решение:

Работа в реальном проекте.

  $(function () { $("#accordion").accordion({collapsible:true, active:false}); $('.open').click(function () { $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'}); $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show(); $(this).hide(); $('.close').show(); }); $('.close').click(function () { $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'}); $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide(); $(this).hide(); $('.open').show(); }); $('.ui-accordion-header').click(function () { $('.open').show(); $('.close').show(); }); }); 

http://jsfiddle.net/bigvax/hEApL/

Многие из них кажутся слишком сложными. Я добился того, что хотел, только следующим образом:

 $(".ui-accordion-content").show(); 

JSFiddle

В итоге я нашел это лучшим решением, учитывая требования:

 // Expand/Collapse all $('.accordion-expand-collapse a').click(function() { $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle(); $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all'); $(this).toggleClass('collapse'); return false; }); 

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

Рассмотрим следующий сценарий, когда у вас есть вертикальный стек элементов,

 ++++++++++++++++++++ + Header 1 + ++++++++++++++++++++ + + + Item 1 + + + ++++++++++++++++++++ + Header 2 + ++++++++++++++++++++ + + + Item 2 + + + ++++++++++++++++++++ 

Если вы ленивы, вы можете построить это, используя таблицу, иначе также будут работать подходящие DIV.

Каждый из блоков элементов может иметь класс itemBlock . При нажатии на заголовок все элементы класса itemBlock будут скрыты ( $(".itemBlock").hide() ). Затем вы можете использовать slideDown() jQuery slideDown() чтобы развернуть элемент под заголовком. Теперь вы в значительной степени реализовали аккордеон.

Чтобы расширить все элементы, просто используйте $(".itemBlock").show() или если вы хотите, чтобы он был анимированным, $(".itemBlock").slideDown(500) . Чтобы скрыть все элементы, просто используйте $(".itemBlock").hide() .

Вот код Sinetheta, преобразованный в плагин jQuery: Сохраните код ниже в js-файле.

 $.fn.collapsible = function() { $(this).addClass("ui-accordion ui-widget ui-helper-reset"); var headers = $(this).children("h3"); headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all"); headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">'); headers.click(function() { var header = $(this); var panel = $(this).next(); var isOpen = panel.is(":visible"); if(isOpen) { panel.slideUp("fast", function() { panel.hide(); header.removeClass("ui-state-active") .addClass("ui-state-default") .children("span").removeClass("ui-icon-triangle-1-s") .addClass("ui-icon-triangle-1-e"); }); } else { panel.slideDown("fast", function() { panel.show(); header.removeClass("ui-state-default") .addClass("ui-state-active") .children("span").removeClass("ui-icon-triangle-1-e") .addClass("ui-icon-triangle-1-s"); }); } }); }; по $.fn.collapsible = function() { $(this).addClass("ui-accordion ui-widget ui-helper-reset"); var headers = $(this).children("h3"); headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all"); headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">'); headers.click(function() { var header = $(this); var panel = $(this).next(); var isOpen = panel.is(":visible"); if(isOpen) { panel.slideUp("fast", function() { panel.hide(); header.removeClass("ui-state-active") .addClass("ui-state-default") .children("span").removeClass("ui-icon-triangle-1-s") .addClass("ui-icon-triangle-1-e"); }); } else { panel.slideDown("fast", function() { panel.show(); header.removeClass("ui-state-default") .addClass("ui-state-active") .children("span").removeClass("ui-icon-triangle-1-e") .addClass("ui-icon-triangle-1-s"); }); } }); }; по $.fn.collapsible = function() { $(this).addClass("ui-accordion ui-widget ui-helper-reset"); var headers = $(this).children("h3"); headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all"); headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">'); headers.click(function() { var header = $(this); var panel = $(this).next(); var isOpen = panel.is(":visible"); if(isOpen) { panel.slideUp("fast", function() { panel.hide(); header.removeClass("ui-state-active") .addClass("ui-state-default") .children("span").removeClass("ui-icon-triangle-1-s") .addClass("ui-icon-triangle-1-e"); }); } else { panel.slideDown("fast", function() { panel.show(); header.removeClass("ui-state-default") .addClass("ui-state-active") .children("span").removeClass("ui-icon-triangle-1-e") .addClass("ui-icon-triangle-1-s"); }); } }); }; 

Обратитесь к нему на странице пользовательского интерфейса и вызовите аналогичный вызов jQuery:

 $("#accordion").collapsible(); 

Выглядит чище и избегает любых классов, которые нужно добавить в разметку.

Попробуйте этот jquery-multi-open-accordion , может помочь вам

Второй комментарий bigvax ранее, но вам нужно убедиться, что вы добавили

  jQuery("#jQueryUIAccordion").({ active: false, collapsible: true }); 

Иначе вы не сможете открыть первый аккордеон после их разваливания.

  $('.close').click(function () { $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'}); $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide(); } 
 Yes, it is possible. Put all div in separate accordion class as follows: <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript"> $(function () { $("input[type=submit], button") .button() .click(function (event) { event.preventDefault(); }); $("#tabs").tabs(); $(".accordion").accordion({ heightStyle: "content", collapsible: true, active: 0 }); }); function expandAll() { $(".accordion").accordion({ heightStyle: "content", collapsible: true, active: 0 }); return false; } function collapseAll() { $(".accordion").accordion({ heightStyle: "content", collapsible: true, active: false }); return false; } </script> <div class="accordion"> <h3>Toggle 1</h3> <div > <p>text1.</p> </div> </div> <div class="accordion"> <h3>Toggle 2</h3> <div > <p>text2.</p> </div> </div> <div class="accordion"> <h3>Toggle 3</h3> <div > <p>text3.</p> </div> </div> 

Вы можете попробовать этот легкий небольшой плагин.

Это позволит вам настроить его согласно вашему требованию. Он будет иметь функциональные возможности Expand / Collapse.

URL: http://accordion-cd.blogspot.com/

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

Я использовал imageButton, но вы также можете применить эту логику к кнопкам.

 /*** Expand all ***/ $(".expandAll").click(function (event) { $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown(); return false; }); /*** Collapse all ***/ $(".collapseAll").click(function (event) { $('.accordion').accordion({ collapsible: true, active: false }); $('.accordion .ui-accordion-header').next().slideUp(); return false; }); 

Кроме того, если у вас есть аккордеоны внутри аккордеона, и вы хотите развернуть все только на этом втором уровне, вы можете добавить запрос:

 /*** Expand all Second Level ***/ $(".expandAll").click(function (event) { $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown(); return false; }); 

Используя пример для Taifun, я изменил его, чтобы позволить развернуть и свернуть.

… // подключить расширение / свернуть все

 var expandLink = $('.accordion-expand-all'); expandLink.click(function () { $(".ui-accordion-content").toggle(); }); 
  • Перестраиваемые разделительные экраны с использованием jQuery UI
  • Как установить jQuery draggable min / max-left и min / max-right
  • JQuery-UI сортируемый список, не играющий хорошо с реактивными обновлениями в шаблоне Meteor
  • Проверьте, имеет ли элемент jQuery datepicker
  • Проблема с jquery.ui.autocomplete.js на IE7
  • JQuery ui tabs load / tabsload событие не срабатывает
  • Переключение между двумя разными классами jQuery
  • Автозаполнение jQuery-UI не отображается хорошо, проблема z-index
  • Анимация addClass / removeClass с jquery
  • Как отладить jQuery вложенный сортируемый перетаскиваемый элемент?
  • Сделайте что-то, когда загрузился плагин jQuery
  • Давайте будем гением компьютера.