javascript - 从 url 哈希打开并滚动到选项卡(JS/Jquery/Bootstrap)

Question

所以我有一个深度嵌套的评论系统。我正在使用 Bootstrap javascript 文件，但只有折叠和动画 css 样式。所以我不使用 nav-tab等等

所有有回复的评论上都有一个按钮。编号1指的是parent的ID(id为1的评论回复)。

<a class="btn" type="button" data-toggle="collapse" href="#replies_1">X replies</a>

然后我有一个div，就是父评论的所有 child 的容器

<div class="collapse" id="replies_1">

当我点击 anchor 时，正如您所猜测的那样，这个 div 被附加到类 in 中。并很好地过渡到打开并显示 children 的评论。

除了滚动部分，我已经尝试过一种有效的方法

$(document).ready(function(){
    if(window.location.hash != "") {
        $('a[href="' + window.location.hash + '"]').click();
    }
});

这会打开正确的选项卡，这很棒。但是，由于该选项卡具有类 collapse它有 css 规则 display:none;并添加内联规则 display: none;

现在，我的脚本无法滚动到正确的位置，因为折叠的元素有这些规则。

不过，我真的不需要滚动到回复，而是父级。

所以我真正需要的是滚动到另一个具有相同后缀 ID 但前缀不同但仍然打开回复选项卡的 anchor ID，就像我在上面的代码中所做的那样

因为 children 在一个 id 为 replies_{id} 的选项卡中, 我可以滚动到 ul 的父级ID 为 comment_{id} 的项目

ul看起来像这样:<ul class="comment__item" id="comment_{id}">

Answer 1

试试这个方法，

 $(document).ready(function(){
    if(window.location.hash != "") {
        var end_id = window.location.hash.split('__')[1];
        $("html,body").animate({scrollTop: $("[id$='__"+ end_id +"'").offset().top},"slow");
    }

});