jquery - 当上方的某些元素隐藏时单击并保持在同一位置

Question

演示：http: //jsfiddle.net/My29d/

我有这样的内容#1、#2、#3、#4 等等...

当我单击readmore#2 并单击readmore#1 时，没关系，因为隐藏的内容在下方展开并且窗口保持在同一位置。

但是当我单击readmore#1 并滚动到内容#2 时，请单击readmore#2

扩展内容#1 将隐藏，内容#2 将显示完整内容。

所以窗口位置不会保持在相同的位置吗？

我不知道该怎么做。

也许使用滚动到当前扩展元素？

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

PS：如果这个问题很糟糕，我很抱歉并告诉我扩展。

Answer 1

我不确定我是否理解你真正想要的，但如果我理解正确，那么这可能是你正在寻找的：

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

more_btn.on('click', function () {
    more_btn.show();
    more_content.hide();
    $(this).hide().next('div').show().css('display', 'inline');
    $('html, body').animate({
        scrollTop: $(this).parent('div').offset().top
    }, 500);
});

演示：http: //jsfiddle.net/My29d/1/

Answer 2

我完成了 ：

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/