Раскрывающийся список с объемными текстами
Есть набор ссылок, пусть будет "Ссылка 1", "Ссылка 2" .... и т.д. При клике на "Ссылка 1" под ней раскрывается текст - "Текст 1". При клике на эту же ссылку уже раскрытый текст скрывается. "Текст 1" так же может быть скрыт при клике на любую другую ссылку например "Ссылка 2". При этом под ссылкой "Ссылка 2" раскрывается "Текст 2" и т.д.
Проблема в том, что если текст объемный, то скрываясь вышестоящий "Текст 1" уезжает вверх страницы, а заголовок "Текст 2" так же уезжает за ним и "Текст 2" получается открыт с середины. Чтобы его прочитать нужно скролить страницу. Как решить эту проблему. КОд ниже.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$(".accordion h3:first").addClass("slow");
$(".accordion ul").hide();
$(".accordion h3").click(function(){
$(this).next("ul").slideToggle("slow")
.siblings("ul:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<div class="accordion">
<h3><a href="#" onclick="return false">Ссылка 1</a></h3>
<ul>Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1
</ul>
<h3><a href="#" onclick="return false">Ссылка 2</a></h3>
<ul>Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
</ul>
</div
|
morzer,
добавьте jquery в строку 0 |
morzer,
добавьте в код скролл к открытому блоку или поищите открывашка 221 |
Спасибо. Сделал так:
scrollTop = $(".accordion h3").offset().top; $('html, body').animate({ scrollTop: scrollTop},500); return false; |
Открывашка 257 со скролингом к заголовку отрытого блока
morzer,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.accordion {
margin: 1000px 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(function() {
$(".accordion h3:first").addClass("slow");
$(".accordion ul").hide();
$(".accordion h3").click(function(event) {
event.preventDefault();
var h3 = $(this);
h3.next("ul").slideToggle("slow").toggleClass("active")
.siblings("ul").removeClass("active")
.slideUp("slow", function() {
var scrollTop = h3.offset().top;
$("html, body").stop().animate({
scrollTop: scrollTop
}, 500)
})
})
});
</script>
<div class="accordion">
<h3><a href="#" >Ссылка 1</a></h3>
<ul>Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1 Текст 1
</ul>
<h3><a href="#" >Ссылка 2</a></h3>
<ul>Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2 Текст 2
</ul>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 13:41. |