如何根据外部链接打开手风琴加载页面 [英] How to load page with accordion open based on external link

问题描述

我正在为我的公司制作FAQ /帮助中心页面。我们要完成的最后一件事是最重要的问题部分，用户可以单击该问题，然后打开该问题所在页面的链接，而手风琴则打开正确的部分以显示答案。

I am working on a FAQ/Helpcenter page for my company. One of the last things we are trying to accomplish is a "top questions section" where users can just click on the question and it opens a link to the page the question is on and the accordion is open to the correct section to display the answer.

$(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个单独的页面，上面有问题，因此理想情况下，我所要做的就是将它置于查询后的链接中（或您可能想到的任何其他方式），以指向正确的页面/问题。谢谢大家，我真的很感谢。

This is the jQuery used for the accordion, and the full working code is here http://jsfiddle.net/gvolkerding/ancu6fgu/3/ One example would be, if we made one of the top questions "How do I sign up to receive promotional emails?", then the page would need to load with accordion section 4 open. We have 8 separate pages with questions on them, so ideally all I would have to do is put in a link with a query after it(or any other way that you could think of) to point to the correct page/question. I really appreciate any help that is offered, thanks everyone.

推荐答案

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

In the fiddle you use ID's (for example accordion-3) to identify, display and hide the accordion sections. That ID you can also use as an anchor for any link to your faq-pages. Put the following code at the end of the document.ready function:

// 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参数代替位置哈希。

and the link to the page would be somethink like /path/to/faq.html#accordion-3. Where accordion-3 is the anchor / element-ID you'll want to open. Be aware that the page also scrolls to the position of the element with the corresponding ID (accordion-3). To avoid this, you'll either have to scroll to top after trigger the click, or you'll use a GET-parameter instead of location hash.

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

由于下面的注释，此处的版本包括滚动到活动问题的解决方案。

Due the comment below, here a version including a solution to scroll to the active question.

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
        });
    }       

}  

更新后的小提琴在这里。

这篇关于如何根据外部链接打开手风琴加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！