According на JQuery: это просто!
Дата: 23 Июн ' 09 Автор: mart Рубрики: Программирование
В ходе работы над различными сайтами возникает необходимость уместить большой объем структурированного текста на странице. Взять к примеру страницу «Вопрос-ответ»: нет необходимости перечитывать все вопросы и ответы на них, а ведь они могут занимать достаточно большой объем. Тут приходит на помощь According («гармошка» по-русски).
Итак, у нас есть система типа
<div class="question">Вопрос номер раз</div> <div class="answer">Замысловатый ответ</div> ... <div class="question">Вопрос номер последний</div> <div class="answer">И как обычно - замысловатый ответ</div> |
Чтобы оно не занимало большой объем на странице сделаем его разворачивающимся по клику на вопрос.
Первое, что делаем — подключаем библиотеку JQuery:
<script type="text/javascript" src="/js/jquery.js"></script> |
Далее вставляем небольшой код, который позволит нам сворачивать и разворачивать блоки с ответами:
<script type="text/javascript"> $(function() { $(document).ready(function(){ $("div.answer").hide(); $("div.quertion").click(function(){ if($(this).next().css("display")=="none" ){ $(this).parent().find("div.answer").slideUp("fast"); $(this).parent().find("div.quertion").removeClass("selected"); $(this).addClass("selected").next().slideDown("fast"); }else $(this).next().slideUp("fast"); }); }); }); </script> |
Добавим в стилях курсор «руку» для пущей наглядности на блок вопроса.
div.question { cursor: pointer; cursor: hand; } |
Вот и вся «сложность». Намного проще — нежели чистый javascript — не так ли?
Пример можно посмотреть тут.