воскресенье, 10 февраля 2013 г.

многоуровневое меню + jquery + accordion

с помощью метода .addSelf добавляем этих прямых потомков обратно в уравнение:

затем находим у них дочерние списки (под-подменю);

выбираем все элементы li прямые потомки #accordion (подменю);

Еще один способ присоединить обработчик к нужным элементам:

Если проследовать вдоль цепочки селекторов, можно убедиться, что код применяется к нужным пунктам. Конечно, можно было бы просто добавить его к каждому пункту списка, но в таком случае можно было бы получить неожиданное поведение вложенного контента в некоторых случаях, например, если в самом контенте присутствовали бы какие-нибудь вложенные списки.

$('#accordion > li, #accordion > li > ul > li').click( );

И так как вложенная разметка не отличается от родительской, — Pпросто применим тот же код и к ней:

$('#accordion li').click( )

В одноуровневом аккордеоне мы присоединяли обработчик ко всем потомкам первого уровня с помощью выражения

<li><a href="#">Darth Fader</a></li>

<li><a href="#">Kellie Kelly</a></li>

<li><a href="#">Beau Dandy</a></li>

<li><a href="#">Johnny Stardust</a></li>

<li><a href="#">Computadors</a> &nbsp;New!</li>

<li class="active">"A" List Celebrities

Мы не зря обращали такое большое внимание на упорядоченность HTML структуры меню аккордеонов и вот почему. Если мы были достаточно специфичны и аккуратны в селекторах, то нам будет очень просто добавить еще один уровень подменю, навесив на него еще один обработчик. Первым дело добавим в разметку второй уровень подменю. Используем абсолютно ту же самую структуру, и вложим ее в подменю первого уровня:

Многоуровневые аккордеоны

> > > Многоуровневые аккордеоны

Перевод хорошего учебника по jQuery

Многоуровневые аккордеоны. Аккордеон jquery UI | jQuery - от новичка до ниндзя

Комментариев нет:

Отправить комментарий