0

我有一系列可展开的内容 DIV，它们最初是折叠的，并在单击另一个带有标题文本的 DIV 时展开。请参阅下面的代码示例。

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

“body”类最初隐藏具有“冗长内容”的“body”DIV。单击“标题”DIV 时，“正文”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();
    }
}
4

2 回答 2

2

您没有向.bodydiv添加任何事件侦听器

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

那么你的gotoHead()函数可能看起来像这样

function gotoHead() {
    document.body.scrollTop = $('#post .heading').offset().top;
}
于 2013-10-17T15:26:25.687 回答
0

根据您的描述，您编写脚本的方式存在一些问题。一是.body div 没有点击事件。第二个是您将 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/

于 2013-10-17T16:48:38.090 回答