Форум

morzer · #1 (**permalink**) 11.07.2016, 10: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

рони · #2 (**permalink**) 11.07.2016, 10:57

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

рони · #3 (**permalink**) 11.07.2016, 11:33

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

morzer · #4 (**permalink**) 11.07.2016, 14:34

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

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

рони · #5 (**permalink**) 11.07.2016, 14:54

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>

Форум

Справочник

Discord чат

Курсы javascript