Question

我们说我有一份标题清单：

<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>

现在，正如您所看到的，默认情况下不会显示.content div。我需要的是一个脚本：

slideDown .content以显示Descriptions-list
当列表可见时，滚动到匹配的说明。

我试过这个，但我无法让它发挥作用：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);
        }
    });

Answer 1

好的，我发现了一种有效的方法：

$(".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);
        }
    });

基本上，当用户点击标题并且未显示描述内容时，脚本将显示它并生成另一次点击。该函数将再次被调用，但这次内容已经可见，因此该函数可以向下滚动到匹配的描述。

jQuery滚动到slideDown父级后的子元素

1 个答案: