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

问题描述

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

我试过使用锚链接，它只加载页面，而不打开面板.

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

此链接将锚定到另一个页面并应打开手风琴:

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

这是我用来点击打开手风琴的代码:

 $(document).ready(function() {$(".accordion .accord-header").click(function() {//用于活动头定义$('.accord-header').removeClass('on');$(this).addClass('on');//手风琴动作if($(this).next("div").is(":visible")){$(this).next("div").slideUp(600);$(this).removeClass('on');} 别的 {$(".accordion .accord-content").slideUp(600);$(this).next("div").slideToggle(600);}});});

这是手风琴结构:

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

解决方案

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

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

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

祝你好运.:)

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);
     }
  });
});

This is the accordion structure:

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

解决方案

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');
    }
});

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

Good luck. :)

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