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

Posted 2023-05-08

【中文标题】如何根据外部链接加载手风琴打开的页面

【英文标题】：How to load page with accordion open based on external link

【发布时间】：2015-08-23 03:28:14

【问题描述】：

我正在为我的公司创建一个常见问题解答/帮助中心页面。我们试图完成的最后一件事是“热门问题部分”，用户只需点击问题，它就会打开指向问题所在页面的链接，并且手风琴打开正确的部分以显示答案.

$(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 个单独的页面，上面有问题，所以理想情况下，我所要做的就是在一个链接后面加上一个查询（或您能想到的任何其他方式）以指向正确的页面/问题。我非常感谢提供的任何帮助，谢谢大家。

【参考方案1】：

在小提琴中，您使用 ID（例如 accordion-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');
  

页面的链接类似于/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。

【讨论】：

这与您所说的滚动到问题完全不同。我们可以让它向下滚动到问题，然后可能向后滚动... 65px。只是为了让问题的标题可见？

@idontwantnoscrubs 我已经更新了答案和相关的小提琴。

太棒了，谢谢，我不知道翻译是否有错误或发生了什么，但是当我使用小提琴中的代码时它根本不起作用，但是当我复制上面的代码时它起作用了完美！非常感谢！

【参考方案2】：

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

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

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

DEMO

【讨论】：

我应该提到我对 jQuery 很陌生，我这段代码是从互联网和另一个 *** 问题拼凑而成的。如果我听起来很愚蠢，但我不知道该怎么办，请原谅。

我很乐意为您介绍....但您必须更具体一点。

好的，这只是第一个例子。说“我如何注册促销电子邮件？”是我们最关心的问题之一。该链接将显示在我们的热门问题页面上，但答案将在带有手风琴的页面上。所以对于这个例子，它需要加载打开“#accordion-4”的页面页面。问题所在页面的链接是scrubsandbeyond.com/help-1.aspx。所以我假设链接看起来像scrubsandbeyond.com/help-1.aspx#accordion-