Главная

Скрываем/показываем группы элементов одной строкой jQuery на примере упорядоченного списка.

Эффект постепенного скрытия/раскрытия парных/непарных элементов упорядоченного списка.

Для выбора непарных элементов из списка мы воспользовались CSS-селектором :even (для парных это селектор :odd), в результате чего строка обработчика клика чуть-чуть усложнилась: onclick="$('#slide_ol2 li:even').slideToggle('slow')"

Селектор "#slide_ol2 li:even" находит элемент с идентификатором slide_ol2, после чего внутри него находит все элементы li, а псевдокласс :even говорит, что из них нужно выбрать непарные. Таким образом происходит неявная итерация для функции slideToggle().

Обратите внимание - в Сафари 4 и Firefox 3 номера скрывшихся пунктов не отображаются после повторного открытия. Это, однако, не проблема jQuery, а проблема самих браузеров - я специально устанавливал CSS-свойство list-style-type уже после открытия в разные значения и оно устанавливалось, но эффекта не приносило. Поэтому, если очень хочется манипулировать отдельными пунктами меню, то лучше их никак не маркировать - тогда видимых изменений не будет, а лучше всего скрывать-разворачивать меню целиком - тогда номера пунктов прекрасно воспроизводятся (помните, что slideToggle предназначена для блочных элементов).

Кликните где-нибудь на тексте, а потом еще раз и посмотрите, что получится.

    Упорядоченный список

  1. Первый пункт
  2. Второй пункт
  3. Третий пункт
  4. Четвертый пункт
  5. Пятый пункт
  6. Шестой пункт
  7. Седьмой пункт

Полный текст примера приведен ниже:

<div onclick="$('#slide_ol').slideToggle('slow')" >

Эффект постепенного скрытия/раскрытия списка.<br>

Кликните где-нибудь на тексте, а потом еще раз и посмотрите, что
получится.

 <ol id="slide_ol"
style="list-style-type: circle; font-family: Verdana; font-size: 17px; border: 1px solid #777777;
width: 300px; background: rgb(220,220,200);">

 <p>Упорядоченный список</p>

 <li>Первый пункт</li>

 <li>Второй пункт</li>

 <li>Третий пункт</li>

 <li>Четвертый пункт</li>

 <li>Пятый пункт</li>

 <li>Шестой пункт</li>

 <li>Седьмой пункт</li>

 </ol>

 </div>