Первый мой блог, первый пост Наверное многие видели симпатичные выкидушки-слайдеры(по клику выезжает текст или еще что то). Попытаюсь рассказать как это можно сделать ну и предложу места применения. [spoiler] Что нам потребуется: 1. Собственно сама библиотека jQuery 2. Немного времени 3. Желание
Возможны 3 варианта поведения слайдера: 1. Все элементы закрыты. Тогда надо открыть только тот, который выбрали. 2. Открыт один элемент и его нужно закрыть. 3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого - свернуться.
Подготовительные работы: 1. Подключаем библиотеку jQuery. 2. Определяем классы используемых элементов. В данном примере у нас есть контейнер id="faq" (в принципе можно обойтись без идентификатора контейнера), элемент, по клику на который под ним развернется какой-то текст, это будет <p class="question"></p>, и собственно контейнер для появляющегося текста <p class="answer"></p>. 3. Естественно, разворачивающий контейнер должен быть скрытым изначально, поэтому прописываем стиль
.answer {display: none}
4. Создаем js файл, например, js.js. Теперь html:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/demo/style.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/demo/js.js"></script>
</head>
<body>
<div id="faq">
<p class="question">Вопрос 1</p>
<p class="answer">Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ
</p>
<p class="question">Вопрос 2</p>
<p class="answer">
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ
</p>
<p class="question">Вопрос 3</p>
<p class="answer">
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ <br />
Ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ ответ
</p>
</div>
</body>
</html>
Теперь рассмотрим все наши варианты поведения слайдера. 1. Все элементы закрыты. Тогда надо открыть только тот, который выбрали.
$(".question").click(function(){
$slider = $(this).next();
if ($slider.is(":hidden")){
$slider.slideDown("slow");
}
});
По клику на <p class="question"> вызывается функция, которая находит следующий контейнер, который должен развернуться естественно. Если он закрыт, то разворачиваем его. 2. Открыт один элемент и его нужно закрыть. Модифицируем немного код, проверка отображается ли слайдер или нет у нас уже есть, необходимо только добавить сворачивание, если элемент уже открыт.
3. Есть открытые элементы, но выбрали один из закрытых, при этом должен открыться новый элемент, а открытые до этого - свернуться. Для этого необходимо найти уже открытые <p class="answer">. Сначала их свернуть, а потом развернуть новый слайдер. Открытие после закрытия обеспечивается callback функцией. При этом необходимо проверить, есть ли открытые элементы (если их нет, то не сработает слайдер на открытие) и не является ли открытый элемент тем же, по которому сейчас кликнули (в этом случае его нужно просто свернуть).
Применение Первое, что приходит в голову, это меню. В тех случаях, когда ссылки первого уровня ни куда не ведут, например. В разрабатываемых мною проектах, обычно использую для разделов типа Вопрос-Ответ (FAQ). В принципе и пример есть упрощенный вариант отображения FAQ . Надеюсь, первый блин не вышел комом и кому-то помог. Спасибо.
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».