Question

我正在为我公司的FAQ / Helpcenter页面工作。我们要完成的最后一件事是“热门问题部分”，用户可以点击该问题，然后打开问题所在页面的链接，手风琴向正确的部分开放以显示答案。

window.top.location.reload();

这是用于手风琴的jQuery，完整的工作代码在这里http://jsfiddle.net/gvolkerding/ancu6fgu/3/ 一个例子是，如果我们提出了一个最重要的问题“我如何注册接收促销电子邮件？”，那么页面将需要加载手风琴第4部分。我们有8个单独的页面，对它们有疑问，所以理想情况下我要做的就是在它之后放入一个查询链接（或者你能想到的任何其他方式）指向正确的页面/问题。非常感谢所提供的任何帮助，谢谢大家。

Answer 1

在小提琴中，您使用ID（例如 accordion-3 ）来识别，显示和隐藏手风琴部分。您也可以将该ID用作任何指向faq页面链接的锚点。将以下代码放在document.ready函数的末尾：

// current location has anchor
if(location.hash) {
    // find accordion href ending with that anchor
    // and trigger a click
    $(".accordion-section-title[href$="+location.hash+"]").trigger('click');
}

和页面的链接会像/path/to/faq.html#accordion-3一样。其中 accordion-3 是你想要打开的锚/元素ID。请注意，页面也会滚动到具有相应ID（ accordion-3 ）的元素的位置。要避免这种情况，您必须在触发点击后滚动到顶部，否则您将使用GET参数而不是位置哈希。

更新：包括滚动到问题的页面

由于下面的评论，这里有一个版本，包括滚动到活动问题的解决方案。

if(location.hash) {
    // the selector 
    var currentTarget = $(".accordion-section-title[href$="+location.hash+"]"),
        offset = {top: 0, left: 0};
    // in case we have a hit...
    if(currentTarget.length) {
        // trigger the click
        currentTarget.trigger('click');

        // get current offset (relative to document, contains left and top)
        // since the selector is the question (not the answer with the id)
        // this will show the question right on top
        offset = currentTarget.offset();

        // just in case you'll want to add some extra space do it like this:
        // offset.top -= 10;

        // and let the page scroll to this position
        $('html, body').animate({
            scrollTop: offset.top,
            scrollLeft: offset.left
        });
    }       

}

更新后的fiddle is here。

Answer 2

您可以这样做的一种方法是将问题索引作为查询参数传递。然后，您将在代码中获取参数值，例如qIndex，然后添加以下内容：

//get question index passed via query parameter
var qIndex = .....

$('.accordion-section-title').click(function(e) {
    ...
})
.eq( qIndex ).trigger('click'); //<<<------------

DEMO

如何基于外部链接加载手风琴打开的页面

2 个答案: