Question

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

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

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

问题由“触发” CSS类声明。

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

我想在用户单击常见问题的锚定链接时显示答案。

我该如何完成？最好没有服务器端（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");
}

链接到页面锚点时，如何在其中调用JS代码？

2 个答案: