Вопрос-ответ (FAQ) на jQuery
by Вредный • 29.01.2010 • jQuery • Нет комментариев
Заказчику очень срочно понадобился на сайт компонент «Вопрос-ответ» и единственным его пожеланием было раскрываемость ответов при клике на вопрос. Недолго думая, пришла в голову идея использовать Definition List (dl), я считаю, что он как никто другой подходит для этих нужд, да и классов не надо придумывать специфических.
Не буду лить много воды, расскажу лишь как это все работает и приведу пример.
Первое, что нужно было сделать это разметка html.
Ну тут ничего сложного
1 2 3 4 5 6 7 8 | <dl> <dt>Вопрос1</dt> <dd>Ответ на поставленный выше вопрос под номер 1, который может содержать достаточно много информации, порой и несколько абзацев, порой и несколько страниц</dd> <dt>Вопрос2</dt> <dd>и так далее...</dd> </dl> |
А теперь непосредственно сам код jQuery, который будет отображать ответ на соответствующий вопрос и скрывать все остальные ответы, чтобы не захламлять рабочее пространство.
1 2 3 4 5 6 7 | $('document').ready(function() { $('dl dd').hide(); $('dl dt').click(function() { $('dl dd').slideUp('fast'); $(this).next().slideDown('slow'); }); }); |
Я предпочел скрывать ответы в скрипте для того, чтобы люди с выключенным JavaScript, могли тоже прочесть вопросы и ответы на них.
1 | $(this).next() |
выбирает следующий элемент, находящийся в том же иерархическом положении относительно дерева DOM, что собственно нам и нужно.
Вы можете с легкостью изменить эффекты, с которыми ответы появляются и исчезают. Работающий пример вы можете посмотреть, пройдя по ссылке.
