jquery转到文章的部分或部分
我正在使用jquery显示/隐藏我在博客上的评论。除了显示评论数量的帖子标题外,我还显示了一个气泡。点击这个气泡,评论就会显示在帖子的底部 我的问题是,如果帖子很长(通常是这样),用户不知道帖子下面会弹出一个评论部分。有什么方法可以转到帖子底部的评论部分吗?我使用的切换功能如下:jquery转到文章的部分或部分,jquery,navigation,Jquery,Navigation,我正在使用jquery显示/隐藏我在博客上的评论。除了显示评论数量的帖子标题外,我还显示了一个气泡。点击这个气泡,评论就会显示在帖子的底部 我的问题是,如果帖子很长(通常是这样),用户不知道帖子下面会弹出一个评论部分。有什么方法可以转到帖子底部的评论部分吗?我使用的切换功能如下: var $j = jQuery.noConflict(); $j(".post-comments").addClass("hidden"); //hide all comments on page
var $j = jQuery.noConflict();
$j(".post-comments").addClass("hidden"); //hide all comments on page
$j(".post-comments-count").toggle(
function () {
$j(this).parent().parent().find(".post-comments").removeClass("hidden");
/* alert('should slide down');
$j(this).parent().parent().find(".post-comments").slideDown("slow");*/
},
function () {
$j(this).parent().parent().find(".post-comments").addClass("hidden");
/* alert('should slide up');
$j(this).parent().parent().find(".post-comments").slideUp("slow"); */
}
);
两件事:
- 我想一个解决方案是在气泡的锚定标签上添加一个#link后缀?但问题是,如果再次单击它,那么在关闭评论部分时,它的效果会不太好吗
- 是的,我知道一旦你打开它,你只能通过点击顶部的气泡来再次关闭评论部分,大多数人都不会这么做。尽管如此,我还是愿意接受这一点
- 我对滑动功能进行了注释,因为出于某些基本原因,我的jquery在wordpress中会关闭,不会向上滑动。因此,直接添加和删除类
- 如果你想要一个活生生的例子,欢迎你在我的博客上查看:kaushikgopal.com/blog
var comment_div = $j(this).parent().parent().find(".post-comments");
comment_div.removeClass("hidden");
var targetOffset = comment_div.offset().top;
$j('html,body').animate({scrollTop: targetOffset}, 1000);
第一部分显然只是对现有类更改的重写,但也存储了对刚刚取消隐藏的commentdom元素的引用
第二部分计算从HTML正文顶部到comments div顶部的垂直偏移量。然后它将页面滚动到该偏移量位置,动画超过1秒(或1000秒)。通过调整targetOffset值,您可以调整用户在屏幕上滚动到的位置。完成所述滚动(包括平滑动画)的简单方法是使用以下代码:
var comment_div = $j(this).parent().parent().find(".post-comments");
comment_div.removeClass("hidden");
var targetOffset = comment_div.offset().top;
$j('html,body').animate({scrollTop: targetOffset}, 1000);
第一部分显然只是对现有类更改的重写,但也存储了对刚刚取消隐藏的commentdom元素的引用
第二部分计算从HTML正文顶部到comments div顶部的垂直偏移量。然后它将页面滚动到该偏移量位置,动画超过1秒(或1000秒)。通过调整targetOffset值,您可以调整用户在屏幕上滚动到的位置。谢谢,Mark,您的解决方案非常有效。尽管出于某种奇怪的原因,comment_div变量似乎没有起到切换的作用。如果是使用完整的选择器标记-$j(this.parent().parent().find(“.post comments”)-它可以工作。不知道为什么。我会设法弄明白的。干杯汉克斯马克,你的解决方案很有效。尽管出于某种奇怪的原因,comment_div变量似乎没有起到切换的作用。如果是使用完整的选择器标记-$j(this.parent().parent().find(“.post comments”)-它可以工作。不知道为什么。我会设法弄明白的。干杯