Вложенный аккордеон jQueryUI работает только в первом подсписке - PullRequest
Новая
       13

Вложенный аккордеон jQueryUI работает только в первом подсписке

2 голосов
/ 31 декабря 2011

Я работаю над сайтом с динамически сгенерированным FAQ и пытаюсь заставить работать вложенные аккордеоны.Проблема в том, что только первый набор вопросов берет класс ui-accordion.

Вот мой код: http://jsfiddle.net/SmFdt/

(Я просто скопировал источник страницы и удалил большинствотекста)

Что я делаю не так?

Ответы [ 2 ]

14 голосов
/ 31 декабря 2011

У вас один и тот же идентификатор, назначенный нескольким элементам div. Вместо этого попробуйте следующее:

HTML 

<h1>Frequently Asked Questions</h1>

<div id="faqs-container" class="accordian">
    <h3><a href="#">One</a></h3>
    <div class="accordian">
        <h3><a href="#">A</a></h3>
        <div>AAAAAAAAAA</div>
        <h3><a href="#">B</a></h3>
        <div>BBBBBBBBBB</div>
    </div>
    <h3><a href="#">Two</a></h3>
    <div class="accordian">
        <h3><a href="#">A2</a></h3>
        <div>AAAAAAAAAA2</div>
        <h3><a href="#">B2</a></h3>
        <div>BBBBBBBBBB2</div>
    </div>
</div>

JavaScript 

$("div.accordian").accordion({
    autoHeight: false,
    collapsible: true,
    active: false
});

Ссылка на пример: http://jsfiddle.net/SmFdt/1/

0 голосов
/ 31 декабря 2011

Попробуйте это http://jsfiddle.net/SmFdt/3/

Причина, по которой это не сработало, заключалась в том, что вы использовали один и тот же идентификатор для нескольких div. Я изменил идентификаторы на классы.

На боковой ноте у вас есть много кода для отображения аккордеона. Возможно, вы захотите уменьшить код. (например, нет необходимости <p> внутри <div>. Вы можете управлять интервалом, используя CSS поля и свойства заполнения.)

...