Question

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

所有有回复的评论都有一个按钮。数字1是指父项的ID（注释的回复，ID为1）。

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

然后我有一个div，它是父评论的所有孩子的容器

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

当我点击锚点时，正如您所猜测的那样，此div会附加到类in并很好地转换为打开并显示注释子项。

除了滚动部分

，我尝试了一件有用的功能

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

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

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

尽管如此，我并不是真的需要滚动回复，而是父母。

所以我真正需要的是滚动到另一个具有相同后缀ID但是前缀不同的锚点ID，但仍然像我上面的代码那样打开回复标签

由于孩子们在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");
    }

});

Answer 2

如果我理解你的问题，我认为这会有效。实际上，您可以从该网址获取主题标签并从您的哈希{id}中找到该ID，然后从其中收集#comment__{id}并在前面添加另一个标识hashValue = "replies__1232" //assuming the default value oldId = hashValue.split("__")[1] // collect id //now append id to required prefix $("#comment__" + oldId).click(function(){ //required stuff here }) ;的所需文本，以便您可以执行同样的。

例如

//在收集哈希后考虑此事件

{{1}}

从url hash打开并滚动到tab（JS / Jquery / Bootstrap）

2 个答案: