Question

我有一系列可扩展内容DIV，这些DIV最初会折叠，并在点击带有标题文本的其他DIV时展开。请参阅下面的代码示例。

<div id="post">
   <div class="heading" onclick="opendiv()">...Heading...</div>
   <div class="body">.....Lengthy content.....</div>
</div>
....
....

'body'类最初隐藏具有'冗长内容'的'body'DIV。当点击'标题'DIV时，'body'DIV扩展使网页可滚动。请记住，在此集合之上和之下有5个或更多可扩展DIV集。单击“正文”部分时，页面必须滚动回其“标题”DIV位置。

这是我用来在DIV上面展开和折叠的js脚本。但是滚动回给定的DIV不起作用。

function opendiv() {
    $('html,body').animate({scrollTop: $("div#post div.heading").offset().top});

    if ($("div#post div.body").css("display") == "block") {
        $("div#post div.body").hide();
     } else {
        $("div#post div.body").show();
    }
}

Answer 1

您没有向.body div

添加任何事件侦听器

<div class="body" onclick="gotoHead()">.....Lengthy content.....</div>

然后您的gotoHead()函数可能如下所示

function gotoHead() {
    document.body.scrollTop = $('#post .heading').offset().top;
}

Answer 2

根据您的描述，您编写脚本的方式存在一些问题。一个是.body div没有click事件。第二个是您将javascript点击事件直接编码到HTML中。通常，除非必须以这种方式完成，否则最好在JavaScript中声明您的事件，这通常更容易返回并编辑新功能。

以下是对您所做的事情的更新：

$('.heading').click(function(e){
    // hide or show the corresponding .body div
    $(this).parent().children('div.body').toggle();
});

$('.body').click(function(e){
    // scroll to the corresponding .heading div
    $('html,body').animate({
        scrollTop: $(this).parent().children('div.heading').offset().top
    }); 
});

您还可以在此处看到此操作： http://jsfiddle.net/joncox/pmeEs/

从JS / Jquery滚动回DIV的位置

2 个答案: