Я могу быть идиотом, но как вы держите несколько разделов в jQuery UI аккордеоне открытым? Демонстрации имеют только одно открытое за раз... Я ищу систему сглаживания типа меню.
JQuery UI-аккордеон, который поддерживает несколько разделов?
Ответ 1
Этот изначально обсуждался в документации 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(); });
"Я могу быть идиотом". Вы не идиот, если не читаете документацию, но если у вас проблемы, обычно ускоряется поиск решения.
Ответ 2
Довольно просто:
<script type="text/javascript">
(function($) {
$(function() {
$("#accordion > div").accordion({ header: "h3", collapsible: true });
})
})(jQuery);
</script>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
Ответ 3
Отправил это в аналогичном потоке, но подумал, что это может быть актуально и здесь.
Достижение этого с помощью одного экземпляра jQuery-UI Accordion
Как отмечали другие, виджет 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 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 icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
return false; // Cancels the default action
}
});
См. демон jsFiddle
Ответ 4
Или даже проще?
<div class="accordion">
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div class="accordion">
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div class="accordion">
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
$(".accordion").accordion({ collapsible: true, active: false });
</script>
Ответ 5
Я сделал плагин jQuery, который имеет одинаковый внешний вид JQuery UI Accordion и может открывать все вкладки\разделы
вы можете найти его здесь
http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/
работает с той же разметкой
<div id="multiOpenAccordion">
<h3><a href="#">tab 1</a></h3>
<div>Lorem ipsum dolor sit amet</div>
<h3><a href="#">tab 2</a></h3>
<div>Lorem ipsum dolor sit amet</div>
</div>
Код 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: плагин обновлен для поддержки стандартных вкладок по умолчанию
Ответ 6
Я нашел сложное решение. Позволяет дважды использовать одну и ту же функцию, но с другим идентификатором.
Код JQuery
$(function() {
$( "#accordion1" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
$( "#accordion2" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});
Код HTML
<div id="accordion1">
<h3>Section 1</h3>
<div>Section one Text</div>
</div>
<div id="accordion2">
<h3>Section 2</h3>
<div>Section two Text</div>
</div>
Ответ 7
На самом деле в течение некоторого времени он искал в интернете решение для этого. И принятый ответ дает хорошее "по книге" ответ. Но я не хотел этого признавать, поэтому продолжал искать и нашел это:
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('<span class="ui-icon ui-icon-triangle-1-e"></span>')
.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>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion styles</title>
<!-- jQuery UI | http://jquery.com/ http://jqueryui.com/ http://jqueryui.com/docs/Theming -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>Toggle Panels</h1>
<div id="notaccordion">
<h3><a href="#">Section 1</a></h3>
<div class="content">
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.
</div>
<h3><a href="#">Section 2</a></h3>
<div>
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.
</div>
<h3><a href="#">Section 3</a></h3>
<div class="top">
Top top top top
</div>
<div class="content">
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.
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<div class="bottom">
Bottom bottom bottom bottom
</div>
<h3><a href="#">Section 4</a></h3>
<div>
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.
</div>
</div>
</body>
</html>`
Ответ 8
Простой, создайте несколько аккордов div, каждый из которых представляет один тег привязки, например:
<div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
</div>
Он добавляет некоторую разметку. Но работает как профессионал...
Ответ 9
Простой: активируйте аккордеон для класса, а затем создайте divs с этим, например, несколько экземпляров аккордеона.
Вот так:
JS
$(function() {
$( ".accordion" ).accordion({
collapsible: true,
clearStyle: true,
active: false,
})
});
HTML
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
Ответ 10
Просто назовите каждую часть аккордеона как своего собственного аккордеона. active: n будет 0 для первого (так оно будет отображаться) и 1, 2, 3, 4 и т.д. для остальных. Поскольку каждый из них имеет собственный аккордеон, все они будут иметь только 1 секцию, а остальные будут свернуты для начала.
$('.accordian').each(function(n, el) {
$(el).accordion({
heightStyle: 'content',
collapsible: true,
active: n
});
});
Ответ 11
Еще проще, пусть он помечен в каждом атрибуте класса тега li и имеет jquery для прокрутки каждого li для инициализации аккордеона.
Ответ 12
открыть jquery-ui - *. js
найти $.widget( "ui.accordion", {
найти _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 };
to
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" );
добавить if (typeof(active) !== 'undefined') { и закрыть }
пользоваться
Ответ 13
Вы просто используете функцию jquery each();
$(function() {
$( ".selector_class_name" ).each(function(){
$( this ).accordion({
collapsible: true,
active:false,
heightStyle: "content"
});
});
});
Ответ 14
Без jQuery-UI-аккордеона можно просто сделать это:
<div class="section">
<div class="section-title">
Section 1
</div>
<div class="section-content">
Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
<div class="section">
<div class="section-title">
Section 2
</div>
<div class="section-content">
Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
И js
$( ".section-title" ).click(function() {
$(this).parent().find( ".section-content" ).slideToggle();
});