DDR64.ru

Выделяем главное

Кликнули – развернули, кликнули – свернули. Простой спойлер на JQuery

Опишу простой скрипт, с помощью которого мы организуем сворачивание/разворачивание некой области на нашей html странице, т.е я сделаю спойлер.

Пример:

Кликаем по тексту ▼

Заготовка:

Область, которую мы будем разворачивать, находится в div с классом spoler. А кликать мы будем по span с классом rs.
Далее пишем скрипт на JQuery, который мы повесим на событие клик мышкой.

Какая логика скрипта.

В этой строчки  мы после клика ищем ближайшего предка с классом razvorot, после чего ищем див с классом spoler. Далее, мы определяем свойство у display, если оно none, то раскрываем нашу область, или просто меняем свойство display на block.

Можно было вместо k.fadeIn(‘slow’) написать k.css(‘display’,’block’), а вместо k.fadeOut(‘slow’) – k.css(‘display’,’none’). Тогда разворот был бы быстрым, не плавным, как при методе fadeIn().

Оценить статью
(3 оценок, среднее: 5,00 из 5)

Добавить комментарий

Войти с помощью: