jQuery UI-аккордеон, который поддерживает несколько разделов?

Я могу быть идиотом, но как вы храните несколько разделов в jQuery UI в аккордеоне? У всех демо есть только одно открытое за раз … Я ищу систему сглаживания типа меню.

Это изначально обсуждалось в документации JQuery UI для Accordion :

ПРИМЕЧАНИЕ. Если вы хотите открыть несколько разделов сразу, не используйте аккордеон

Аккордеон не позволяет одновременно открывать более одной панели контента, и для этого требуется много усилий. Если вы ищете виджет, который позволяет открывать более одной панели содержимого, не используйте это. Обычно он может быть написан несколькими строками jQuery, что-то вроде этого:

jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); }); 

Или анимированные:

 jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); }); 

«Возможно, я идиот». Вы не идиот, если не читаете документацию, но если у вас проблемы, обычно ускоряется поиск решения.

Довольно просто:

  

First

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Second

Phasellus mattis tincidunt nibh.

Third

Nam dui erat, auctor a, dignissim quis.

Написал это в аналогичной теме, но подумал, что это может быть актуально и здесь.

Достижение этого с помощью одного экземпляра jQuery-UI Accordion

Как отмечали другие, виджет Accordion не имеет опции API для этого. Однако, если по какой-то причине вы должны использовать виджет (например, вы поддерживаете существующую систему), это можно достичь, используя beforeActivate обработчика события beforeActivate чтобы подорвать и эмулировать поведение виджета по умолчанию.

Например:

 $('#accordion').accordion({ collapsible:true, beforeActivate: function(event, ui) { // The accordion believes a panel is being opened if (ui.newHeader[0]) { var currHeader = ui.newHeader; var currContent = currHeader.next('.ui-accordion-content'); // The accordion believes a panel is being closed } else { var currHeader = ui.oldHeader; var currContent = currHeader.next('.ui-accordion-content'); } // Since we've changed the default behavior, this detects the actual status var isPanelSelected = currHeader.attr('aria-selected') == 'true'; // Toggle the panel's header currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString())); // Toggle the panel's icon currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected); // Toggle the panel's content currContent.toggleClass('accordion-content-active',!isPanelSelected) if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); } return false; // Cancels the default action } }); - $('#accordion').accordion({ collapsible:true, beforeActivate: function(event, ui) { // The accordion believes a panel is being opened if (ui.newHeader[0]) { var currHeader = ui.newHeader; var currContent = currHeader.next('.ui-accordion-content'); // The accordion believes a panel is being closed } else { var currHeader = ui.oldHeader; var currContent = currHeader.next('.ui-accordion-content'); } // Since we've changed the default behavior, this detects the actual status var isPanelSelected = currHeader.attr('aria-selected') == 'true'; // Toggle the panel's header currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString())); // Toggle the panel's icon currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected); // Toggle the panel's content currContent.toggleClass('accordion-content-active',!isPanelSelected) if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); } return false; // Cancels the default action } }); 

См. Демонстрацию jsFiddle

Или даже проще?

 

First

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Second

Phasellus mattis tincidunt nibh.

Third

Nam dui erat, auctor a, dignissim quis.

Я сделал плагин jQuery, который имеет одинаковый внешний вид JQuery UI Accordion и может открывать все вкладки \ разделы

Вы можете найти это здесь

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

работает с той же разметкой

 

tab 1

Lorem ipsum dolor sit amet

tab 2

Lorem ipsum dolor sit amet

Код Javascript

 $(function(){ $('#multiOpenAccordion').multiAccordion(); // you can use a number or an array with active option to specify which tabs to be opened by default: $('#multiOpenAccordion').multiAccordion({ active: 1 }); // OR $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] }); $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs }); 

UPDATE: плагин обновлен для поддержки стандартных вкладок по умолчанию

UPDATE: этот плагин теперь устарел.

Фактически искал интернет для решения этого на некоторое время. И принятый ответ дает хорошее «по книге» ответ. Но я не хотел этого признавать, поэтому я продолжал искать и нашел это:

http://jsbin.com/eqape/1601/edit – Живой пример

В этом примере используются правильные стили и добавляются требуемые функции одновременно, в комплекте с пространством для записи добавьте свои собственные функции при каждом нажатии заголовка. Также позволяет несколько divs находиться между «h3» s.

  $("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset") .find("h3") .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom") .hover(function() { $(this).toggleClass("ui-state-hover"); }) .prepend('') .click(function() { $(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end() .next().toggleClass("ui-accordion-content-active").slideToggle(); return false; }) .next() .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom") .hide(); 

Код HTML:

 < !DOCTYPE html>    Toggle Panels (not accordion) using ui-accordion styles        

Toggle Panels

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Top top top top
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
  • List item one
  • List item two
  • List item three
Bottom bottom bottom bottom

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
`

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

Код JQuery

 $(function() { $( "#accordion1" ).accordion({ collapsible: true, active: false, heightStyle: "content" }); $( "#accordion2" ).accordion({ collapsible: true, active: false, heightStyle: "content" }); }); 

Код HTML

 

Section 1

Section one Text

Section 2

Section two Text

Простой, создайте несколько аккордов div каждый, представляющий один якорный тег, например:

  

Это добавляет некоторую разметку. Но работает как профессионал …

Простой: активный аккордеон к classу, а затем создайте divs с этим, например, несколько экземпляров аккордеона.

Как это:

JS

 $(function() { $( ".accordion" ).accordion({ collapsible: true, clearStyle: true, active: false, }) }); 

HTML

 

Title

lorem

Title

lorem

Title

lorem

https://jsfiddle.net/sparhawk_odin/pm91whz3/

Просто назовите каждый раздел аккордеона как своего собственного аккордеона. active: n будет 0 для первого (так оно будет отображаться) и 1, 2, 3, 4 и т. д. для остальных. Поскольку каждый из них – это собственный аккордеон, все они будут иметь только 1 секцию, а остальные будут свернуты, чтобы начать.

 $('.accordian').each(function(n, el) { $(el).accordion({ heightStyle: 'content', collapsible: true, active: n }); }); 

Еще проще, пусть он помечен в атрибуте classа li и имеет jquery для прокрутки каждого li для инициализации аккордеона.

открыть jquery-ui – *. js

find $.widget( "ui.accordion", {

find _eventHandler: function( event ) { внутри

изменение

 var options = this.options, active = this.active, clicked = $( event.currentTarget ), clickedIsActive = clicked[ 0 ] === active[ 0 ], collapsing = clickedIsActive && options.collapsible, toShow = collapsing ? $() : clicked.next(), toHide = active.next(), eventData = { oldHeader: active, oldPanel: toHide, newHeader: collapsing ? $() : clicked, newPanel: toShow }; 

в

 var options = this.options, clicked = $( event.currentTarget), clickedIsActive = clicked.next().attr('aria-expanded') == 'true', collapsing = clickedIsActive && options.collapsible; if (clickedIsActive == true) { var toShow = $(); var toHide = clicked.next(); } else { var toShow = clicked.next(); var toHide = $(); } eventData = { oldHeader: $(), oldPanel: toHide, newHeader: clicked, newPanel: toShow }; 

перед active.removeClass( "ui-accordion-header-active ui-state-active" );

add if (typeof(active) !== 'undefined') { и закрытие }

наслаждаться

Вы просто используете функцию jquery each ();

 $(function() { $( ".selector_class_name" ).each(function(){ $( this ).accordion({ collapsible: true, active:false, heightStyle: "content" }); }); }); 

Без jQuery-UI аккордеона можно просто сделать это:

 
Section 1
Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Section 2
Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

И js

 $( ".section-title" ).click(function() { $(this).parent().find( ".section-content" ).slideToggle(); }); 

https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/