从url hash(JS/Jquery/Bootstrap)打开并滚动到选项卡

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},我可以滚动到父级,这是一个ulid 为的项目comment_{id}

该ul如下所示:<ul class="comment__item" id="comment_{id}">

Answer 1

如果我正确理解你的问题，我认为这会起作用。实际上，您可以从该 url 获取主题标签，并从散列中找到 id，#replies__{id}然后{id}从中收集该 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   
}) ;