[英]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() {
// 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
。
$(function () {
var $accordionSecion = $(window.location.hash);
if ($accordionSecion.length) {
$(window).scrollTop($accordionSecion.offset().top);
$accordionSecion.addClass('on');
}
});
您可能可以将相同的处理程序与onhashschange侦听器一起使用,以处理对手风琴标题的单击。
祝好运。 :)
$(document).ready(function(){
var hash = window.location.hash;
if (hash) {
var element = $(hash);
if (element.length) {
element.trigger('click');
}
}
});
在您要打开手风琴的页面上尝试上面的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.