Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.07.2016, 11:55
Новичок на форуме
Отправить личное сообщение для morzer Посмотреть профиль Найти все сообщения от morzer
 
Регистрация: 11.07.2016
Сообщений: 2

Раскрывающийся список с объемными текстами
Есть набор ссылок, пусть будет "Ссылка 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, 11.07.2016 в 13:53.
Ответить с цитированием
  #2 (permalink)  
Старый 11.07.2016, 11:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,267

morzer,
добавьте jquery в строку 0
Ответить с цитированием
  #3 (permalink)  
Старый 11.07.2016, 12:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,267

morzer,
добавьте в код скролл к открытому блоку или поищите открывашка 221
Ответить с цитированием
  #4 (permalink)  
Старый 11.07.2016, 15:34
Новичок на форуме
Отправить личное сообщение для morzer Посмотреть профиль Найти все сообщения от morzer
 
Регистрация: 11.07.2016
Сообщений: 2

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

scrollTop = $(".accordion h3").offset().top;
$('html, body').animate({ scrollTop: scrollTop},500);
return false;
Ответить с цитированием
  #5 (permalink)  
Старый 11.07.2016, 15:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,267

Открывашка 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Раскрывающийся и закрывающийся список atpronin Работа 4 26.09.2013 22:21
Раскрывающийся список atpronin (X)HTML/CSS 1 26.09.2013 18:20
Раскрывающийся список не работает в FireFox Andy-LC Элементы интерфейса 12 08.02.2011 10:47
Условный раскрывающийся список на javascript hizer Элементы интерфейса 5 04.02.2010 17:15
Раскрывающийся список, например регионы и города по ним serov Элементы интерфейса 5 15.07.2009 09:49