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

Question

我正在为我公司的FAQ/Helpcenter页面工作。我们试图完成的最后一件事是“顶级问题”部分，用户只需点击问题即可打开问题所在页面的链接，并且手风琴向正确部分打开以显示答案。

$(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（例如手风琴3）来识别小提琴，显示和隐藏手风琴部分。该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'); 
} 

和链接的网页会被somethink像/path/to/faq.html#accordion-3。 Where 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