链接到锚点并打开手风琴 [英] Link to anchor and open accordion

问题描述

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

How do I open an accordion panel by using an external anchor link?

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

I've tried using an anchor link and it just loads the page, without opening the panel.

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

What I'm trying to achieve is that when the anchor link is clicked, the page loads, scroll to the panel and then open the accordion.

此链接是将链接到另一页并打开手风琴的链接:

This link is the one that will anchor to the other page and should open the accordion:

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

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

This is the code I am using to open the accordion on click:

 $(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>

推荐答案

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

You can use window.location.hash on document ready to initialize your accordion.

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

您可能可以对 onhashschange 收听者来处理单击手风琴标题的操作.

You can probably use same handler with onhashschange listener to handle click on accordion titles.

祝你好运.:)

这篇关于链接到锚点并打开手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！