Как отобразить более одного элемента в открытом разделе аккордеона jquery ui - PullRequest
0 голосов
/ 06 ноября 2011

JQuery UI аккордеон содержит множество панелей, и каждая панель содержит множество однострочных пунктов меню.Аккордеон jqueryui показывает только один элемент на каждой панели.Как заставить аккордеон показывать больше предметов?

$( "#accordion" ).accordion({
        fillSpace: true,
        autoHeight: false,
        navigation: true,
    collapsible: true
});




<h3>
    <a href="#">mmmmmmm</a></h3>
    <div>
        <ul>
            <li><a target='DoklstlG' href='xxxxxx'>
                jjjjjj</a></li>
            <li><a target='DoklstlO' href='yyyyy'>Ostuarve</a></li>
            <li><a target='UnpaidG' href='zzzzzzz'>hjkhkjjsumine</a></li>
            <li>&nbsp;</li>
...
        </ul>
    </div>

<h3>
    <a href="#">kkkkk</a></h3>
<ul>
    <li><a target='DoklstlVL' href='nnnnnnnn'>V&#228;ljastus</a></li>
    <li><a target='DoklstlSL' href='mmmmmmmmmm'>Sissetulek</a></li>
...

Ответы [ 2 ]

4 голосов
/ 06 ноября 2011

, как сказал другой ответ, документация специально инструктирует пользователя НЕ делать этого

"NOTE: If you want multiple sections open at once, don't use an accordion."

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

<div class="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
</div>
<div class="accordion">
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>
<div class="accordion">
    <h3><a href="#">Third header</a></h3>
    <div>Third content</div>
</div>

вот скрипт:

$(".accordion").accordion({collapsible: true});
1 голос
/ 06 ноября 2011

Документация специально инструктирует пользователя НЕ делать этого:

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

Источник: Документация по jQuery UI

UPDATE

Попробуйте изменить fillSpace: false и autoHeight : true, посмотрите, что это делает.

...