Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Раскрывающийся список с объемными текстами (https://javascript.ru/forum/misc/63956-raskryvayushhijjsya-spisok-s-obemnymi-tekstami.html)

morzer 11.07.2016 11:55

Раскрывающийся список с объемными текстами
 
Есть набор ссылок, пусть будет "Ссылка 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

рони 11.07.2016 11:57

morzer,
добавьте jquery в строку 0

рони 11.07.2016 12:33

morzer,
добавьте в код скролл к открытому блоку или поищите открывашка 221

morzer 11.07.2016 15:34

Спасибо. Сделал так:

scrollTop = $(".accordion h3").offset().top;
$('html, body').animate({ scrollTop: scrollTop},500);
return false;

рони 11.07.2016 15:54

Открывашка 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, время: 15:38.