链接到锚点并展开折叠框

Question

如何使用外部锚链接打开手风琴面板？

我尝试了使用锚链接，但它只是加载页面，而没有打开面板。

我想要实现的是，当单击锚链接时，页面将加载，滚动到面板，然后打开手风琴。

这个链接将会作为锚点链接到其他页面，并应该打开手风琴：

 <a class="linkTo" href="/project#<?php the_sub_field('area_link'); ?>">

这是我用来在点击时打开手风琴的代码：

 $(document).ready(function() {
   $(".accordion .accord-header").click(function() {
     // for active header definition
     $('.accord-header').removeClass('on');
     $(this).addClass('on');

     // accordion actions
     if($(this).next("div").is(":visible")){
       $(this).next("div").slideUp(600);
       $(this).removeClass('on');
     } else {
       $(".accordion .accord-content").slideUp(600);
       $(this).next("div").slideToggle(600);
     }
  });
});

这是手风琴的结构:

<div class="accordion">
  <div class="accord-header" id="<?php the_sub_field('area_link'); ?>">Accordion 1</div>
    <div class="accord-content">
        <!-- Content -->
    </div>
  </div>
</div>

- Marco

---

可能是从外部锚链接打开手风琴面板的重复问题。 - Yannick Huber

您可以在页面加载时检查 window.location 的值，以决定是否打开该手风琴。 - Alex Yokisama

@Yannjoel 我看过了，但不是同样的情况，他们正在使用jQueryUI。 - Marco

你是什么意思，@AlexYokisama？ - Marco

这个答案仍然可以解决你的问题 https://stackoverflow.com/a/43743091/6886695 - Yannick Huber

问题在于当你进入一个包含id链接的页面后，手风琴不会打开，对吧？在$(document).ready()中检查window.location是否包含元素id。如果是这样，就执行你需要打开手风琴的操作。 - Alex Yokisama

Answer 1

您可以在文档准备就绪时使用 window.location.hash 来初始化您的手风琴。

$(function () {
    var $accordionSecion = $(window.location.hash);
    if ($accordionSecion.length) {
       $(window).scrollTop($accordionSecion.offset().top);
       $accordionSecion.addClass('on');
    }
});

您可能可以使用相同的处理程序和 onhashchange 监听器来处理单击手风琴标题。

祝您好运。 :)

- Mladen Ilić

---

我在我的原始答案中添加了一小段代码作为示例。 - Mladen Ilić

Answer 2

$(document).ready(function(){
 var hash = window.location.hash;
 if (hash) {
   var element = $(hash);
   if (element.length) {
   element.trigger('click');
 }
 }
});

在您想打开手风琴的页面上尝试上述代码。

- SRK

---

只需将此代码放入与您的手风琴相同的文件中。确保您附加到URL的哈希与手风琴的ID相同，它应该可以正常工作。如果您需要其他帮助，请告诉我。 - SRK