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

Question

我正在为我的公司制作一个常见问题解答/帮助中心页面。我们想要完成的最后一件事是"热门问题部分"，用户只需点击问题，它就会打开一个链接，链接到问题所在的页面，手风琴打开到正确的部分，显示答案。

$(document).ready(function() {
function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active')
  .find('img').attr('src', 'http://www.scrubsandbeyond.com/app_themes/scrubsandbeyond/graphics/right.png');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');
    if($(this).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();
        $(this).find('img').attr('src', 'http://www.scrubsandbeyond.com/app_themes/scrubsandbeyond/graphics/down.png');
        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }
    e.preventDefault();
});

});

这是用于手风琴的jQuery，完整的工作代码在这里http://jsfiddle.net/gvolkerding/ancu6fgu/3/举个例子，如果我们设置了一个最重要的问题"我如何注册以接收促销邮件?"，那么页面就需要在打开手风琴部分4的情况下加载。我们有8个单独的页面上的问题，所以理想情况下，所有我要做的就是把它(或任何其他方式，你能想到的)后查询链接指向正确的页面/问题。我真的很感谢提供的任何帮助，谢谢大家。

Answer 1

使用ID(例如accordion-3)来识别、显示和隐藏accordion部分。您还可以使用该ID作为指向常见问题页面的任何链接的锚。将以下代码放在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
        });
    }       
}  

更新的小提琴在这里

Answer 2

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

//get question index passed via query parameter
var qIndex = .....
$('.accordion-section-title').click(function(e) {
    ...
})
.eq( qIndex ).trigger('click'); //<<<------------