2014-10-21 5 views
0

Допустим, у меня есть список заглавий:JQuery прокрутки дочернего элемента после slideDown родителя

<ul id="Titles-list> 
    <li class="title">Title1</li> 
    <li class="title">Title2</li> 
    <li class="title">Title3</li> 
</ul> 

Ниже названия я получил DIV, который содержит больше информации:

<div> 
    <h1>Descriptions</h1> 
    <div class="content" style="display:none"> 
    <ul id="Descriptions-list"> 
     <li id="Title1">This is a description of Title1.</li> 
     <li id="Title2">This is a description of Title2.</li> 
     <li id="Title3">This is a description of Title3.</li> 
    </ul> 
    </div> 
</div> 

Теперь, как вы можете видеть, div .content не отображается по умолчанию. Что мне нужно, это скрипт, который будет:

  1. срабатывать при нажатии на элемент на Титулы-лист
  2. slideDown .content для отображения описаний-список
  3. когда список виден , выделите соответствующее описание.

Я попытался это, но я не мог заставить его работать: In JQuery is there way for slideDown() method to scroll the page down too?

сценарий, который я написал до сих пор (не работает):

$(".title").bind("click", function() { 
     var $this = $(this), 
      title = $this.text(); 

     $(".content").slideDown(200, scroll($('#' + title).offset().top)); 

     function scroll (position) { 
      $('html, body').delay('200').animate({ 
       scrollTop: position 
      }, 200); 
     } 
    }); 
+1

Не могли бы вы показать свой код js? –

ответ

0

Ok , я нашел способ, который работает:

$(".title").bind("click", function() { 
     var $this = $(this), 
      title = $this.text(); 
      content = $(".content"); 
if(content.css("display")=="none"){ 
     $(".content").slideDown(); 
     $this.click(); 
} else{ 
    scroll($('#' + title).offset().top); 
} 

     function scroll (position) { 
      $('html, body').delay('200').animate({ 
       scrollTop: position 
      }, 200); 
     } 
    }); 

в основном, когда пользователь нажимает на заголовок и содержание Описания не отображается скрипт покажет его и сгенерировать еще один клик. Функция будет вызываться снова, но на этот раз содержимое будет уже видимым, поэтому функция может прокручиваться до соответствующего описания.

Смежные вопросы