Question

在html页面上使用以下功能来显示/隐藏有关评论的更多详细信息。问题是，当点击阅读更多链接时，页面总是向上滚动到顶部，从而使用户远离他们试图查看的实际评论。

尝试在下面的代码块中使用return false;是否正确？如果是这样的话？

var collapseIt = function(){

     var collapsedSize = '25px';
   $('.item').each(function() {

    var h = this.scrollHeight;

    console.log(h);
    var div = $(this);

    if (h > 40) {
      div.css('height', collapsedSize);
      div.after('<a id="more" class="item" href="#">Read more</a><br/>');
      var link = div.next();
      link.click(function(e) {
        e.stopPropagation();

        if (link.text() != 'Collapse') {
          link.text('Collapse');
          div.animate({
            'height': h
          });

        } else {
          div.animate({
            'height': collapsedSize
          });
          link.text('Read more');
        }

      });
    }

  });   
};

Answer 1

最简单的方法是阻止默认操作：

link.click(function(e) {
  e.preventDefault();
});

另一种方法是返回滚动位置：

var scrollTop = document.body.scrollTop;

link.click(function(e) {
  document.body.scrollTop = scrollTop;
});

Answer 2

替换您的代码以添加“阅读更多”＆＃39;链接以下行：

div.after('<a id="more" class="item" href="#!">Read more</a><br/>');

这个答案在这里得到了很好的解释：

https://stackoverflow.com/a/11246131/802651

Answer 3

把

e.preventDefault()

在点击处理程序的开头。

用户单击读取更多链接后停止页面滚动到顶部

3 个答案: