Опитвам се да създам акордеон, способен да разшири няколко панела наведнъж. Опитах се да го намеря в jQuery UI API, но все още не съм намерил правилния начин.
Моля, уведомете ме дали има начин да направите това с помощта на jQuery UI акордеон.
Опитвам се да създам акордеон, способен да разшири няколко панела наведнъж. Опитах се да го намеря в jQuery UI API, но все още не съм намерил правилния начин.
Моля, уведомете ме дали има начин да направите това с помощта на jQuery UI акордеон.
Както други отбелязаха, джаджата Accordion
няма опция за API, за да направи това директно. Въпреки това, ако трябва да използвате приспособлението, е възможно да постигнете това с помощта на 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; // Cancel the default action
}
});
styleHeight
на акордеона, което във вашия случай вероятно трябва да е styleHeight:'content'
.
- person Boaz - CorporateShillExchange; 29.03.2015
Можете да напишете няколко акордеона, които са подредени и всеки акордеон има само един панел. По този начин панелите могат да се превключват индивидуално.
Акордеонът по дефиниция е набор от разширяващи се елементи, които се сменят по определен начин. Ти не искаш това. Вие просто искате набор от разширяващи се елементи. Изключително лесно е да се изгради това с jQuery. Често не се нуждае от нищо повече от това:
$('.my-heading-class').on('click', function() {
$(this).next('.my-content-class').slideToggle();
});
<div class="my-heading-class">My Heading</div>
<div class="my-content-class">My Content</div>