0

最初は折りたたまれていて、見出しテキストのある別の DIV をクリックすると展開される一連の展開可能なコンテンツ DIV があります。以下のコードサンプルを参照してください。

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

「body」クラスは、最初は「長いコンテンツ」を持つ「body」DIV を非表示にします。「heading」DIV をクリックすると、「body」DIV が展開され、Web ページがスクロール可能になります。このセットの上下に、このような展開可能な DIV セットが 5 つ以上あることに注意してください。「本文」セクションをクリックすると、ページは「見出し」の 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

0

あなたの説明に基づいて、スクリプトのコーディング方法にいくつかの問題があります。1 つは、.body div のクリック イベントがないことです。2 つ目は、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 に答える