|
Раскрывающийся и сворачивающийся по клику div
Добрый вечер! Прошу найти решение задачи.
Есть несколько div, при клике на которые разворачивается скрытый текст: <div class="view-source"><a href="#></a> <div class="hide">Спрятанный текст</div> </div> <div class="view-source"><a href="#></a> <div class="hide">Спрятанный текст</div> </div> <div class="view-source"><a href="#></a> <div class="hide">Спрятанный текст</div> </div>
$(document).ready(function(){
$('.view-source .hide').hide();
$('.view-source a').toggle(
function(){
$(this).siblings('.hide').stop(false, true).slideDown(500);
},
function(){
$(this).siblings('.hide').stop(false, true).slideUp(500);
}
);
});
Как сделать так, чтобы развернутый div сворачивался при клике на любой из других div'ов - оберток (с классом view-source)? То есть, на один момент времени должен быть открыт только 1 скрытый div. |
Кавычки у атрибутов надо закрывать...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">111</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">222</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">333</a>
<div class="hide">Спрятанный текст</div>
</div>
<script>
$(document).ready(function(){
$('.view-source .hide').hide();
$('.view-source a').on('click', function() {
$('.view-source .hide').slideUp(500);
$(this).parent().find('.hide').slideDown(500);
});
});
</script>
</body>
</html>
|
Спасибо! :)
|
jsnb,
нажмите 111 второй раз или поместите дивы в конец длинной страницы ... Вариант
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="view-source">
<a href="#">111</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">222</a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">333</a>
<div class="hide">Спрятанный текст</div>
</div>
<script>
$(function(){
$('.view-source .hide').hide();
$a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).next().slideUp(500);
$(this).next().slideToggle(500);
});
});
</script>
</body>
</html>
|
Цитата:
|
Перекидывает на самый верх сайта
Здравствуйте, сделал отдельно все работает. Переношу на сайт, при нажатии выбрасывает на верх страницы и div не раскрывается. Думаю дело в ссылке "#" может можно чем-то заменить.Спасибо!
|
Александр77,
может забыли function(event) { event.preventDefault(); добавить? |
не работает код
проблема в том что у меня на этой странице подключен слайдер и когда я подключаю библиотеку слайдер перестает работать
|
Александр77,
ненадо грузить много версий jquery достаточно одной |
я их заменил и слайдер перестал работать? с чем это может быть связанно
|
| Часовой пояс GMT +3, время: 13:44. |
|