链接到页面锚点时，如何在那里调用 JS 代码

Question

我的网站有一个FAQ页面，默认情况下，它只显示问题，而不是答案，以防止混乱(可能有更好的方法，请随时提出建议(。

要查看答案，

用户必须单击问题，然后折叠打开答案。这是在浏览器端完成的，使用Javascript和jQuery，如下所示：

<script type="text/javascript" >
    $(document).ready(function(){
        $(".trigger").click(function(){
            $(this).toggleClass("active").next().slideToggle("fast");
        });
    });
</script>

这些问题是用"触发器"CSS 类声明的。

现在，我使用锚点链接到其他页面的常见问题解答问题。这会将页面滚动到问题，但不会自动显示答案。

当用户单击常见问题解答问题的锚定链接时，我喜欢揭示答案。

我怎样才能做到这一点？最好没有服务器端(php(代码，但如果有必要，我也可以这样做。

以下是指向我的页面的示例链接：

http://apps.tempel.org/FindAnyFile/support.php#catsearch

Answer 1

您可以在页面加载后在javascript中检查URL是否有锚点目标，如果是，则通过该锚点查找锚点，模拟点击。如果您知道要做什么，则可能有一种更直接的方法来旋转打开它，而不是发送单击操作。

我看到你已经包含了jQuery，并且已经有一个.ready，所以我会把它添加到其中：

$(document).ready(function() {
    if(window.location.hash != '') {
        $(window.location.hash).click();
    }
})

Answer 2

如果要显示答案，可以添加一个查询字符串参数，support.php会在页面加载时检查该参数。如果有这样的参数，请在 URL 中找到 ID 并调用任何可以显示答案的函数。

例如，链接到

http://apps.tempel.org/FindAnyFile/support.php?showanswer=true#catsearch

然后，在页面加载时：

const urlParams = new URLSearchParams(window.location.search);
const showAnswer = urlParams.has('showanswer');
if (showAnswer) {
  $('#' + window.hash).toggleClass("active").next().slideToggle("fast");
}