0

ここに画像の説明を入力

デモ: http://jsfiddle.net/My29d/

#1、#2、#3、#4 などのコンテンツがあります...

readmore#2 をクリックしてreadmore#1 をクリックすると、非表示のコンテンツが下に展開され、ウィンドウは同じ位置にとどまるため、問題ありません。

しかし、readmore#1 をクリックしてコンテンツ #2 にスクロールすると、#2 をクリックしますreadmore。

展開されたコンテンツ #1 は非表示になり、コンテンツ #2 は完全なコンテンツを表示します。

ウィンドウの位置は同じ位置にとどまりませんよね？

どうすればいいのかわかりません。

たぶん、現在の展開された要素までスクロールを使用しますか？

more_btn.on('click', function () {
    more_btn.show();
    more_content.hide();
    $(this).hide().next('div').show().css('display', 'inline');
});

PS : この質問がよくわからない場合は、申し訳ありませんが拡大してください。

4

2 に答える 2

1

私は今終わった：

var more_btn = $('div > span');
var more_content = $('div > div');

more_btn.on('click', function (e) {
    var $this = $(this);
    var top = e.pageY - $(window).scrollTop();
    more_btn.show();
    more_content.hide();
    $(this).hide().next('div').show().css('display', 'inline');
    $('html, body').scrollTop(
        $this.next('div').offset().top - top
    );

});

デモ: http://jsfiddle.net/My29d/4/

于 2013-09-24T09:00:47.280 に答える