链接到锚点并打开手风琴

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>

Answer 1

您可以在准备好初始化手风琴的文档上使用window.location.hash。

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

您可能可以使用与onhashschange 侦听器相同的处理程序来处理手风琴标题的点击。

祝你好运。 :)

Answer 2

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

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