Jquery 根据URL-Wordpress菜单中的#目标打开手风琴项目

我有一个手风琴，有三个内容区。我想在有人单击一个菜单项时激活相对手风琴，该菜单项的url（/experties#target）中附加了一个锚。按照我的手风琴的设置方式，它会将

.show

添加到面板

.panel

，该面板单击标题元素

.panelTrigger

。我试图找出如何根据url末尾的#目标连接触发。另一个问题是wordpress在散列之前添加了/

HTML

<div class="accordion" id="accordion">
<?php if (have_rows('accordion')) {
$count = 0;
while (have_rows('accordion'))  { the_row(); $count++; ?>
        <div class="parentPanel item-<?php echo $count; ?>">
             <a class="panelTrigger" href="#<?php the_sub_field('accordion_title'); ?>"><?php the_sub_field('accordion_title'); ?></a>

                <div class="panel" id="<?php the_sub_field('accordion_title'); ?>">
                    <div class="greenLine"></div>
                    <?php the_sub_field('accordion_content'); ?>

                    <?php if (have_rows('accordion_logos')) {
                        echo ' <h3>CREDENTIALS</h3><div class="logos">';
                        while (have_rows('accordion_logos')) { the_row(); ?>

                            <img src="<?php the_sub_field('logo'); ?>"/>
                  <?php }
                    echo '</div>';
                    } ?>

        </div>

我知道这是可能的，只需找出如何连接触发器或将

.show

添加到#目标面板即可。谢谢

当页面加载时，您可以在哈希后获得值，然后使用该值只需将

show

类添加到面板并切换相同的值即可

演示代码：

$（文档）.ready（函数（）{
//让url=window.location.hash.substr（1）
//var to_open=“#”+url；
//这只是为了演示。。。
让url=“www.someth.com/somethins#xyz”；
var to_open=“#”+url.split（“#”）[1]；
$（to_open）.prev（）.addClass（'活动'）
$（to_open）.addClass（“show”）//添加id匹配的类
$（打开）。滑动切换（350）；//显示
})

.panel{
显示：无
}
.主动{
颜色：红色
}

" />
xyzz
" />

这似乎不起作用。似乎auto

/

正在成为阻碍，因为如果它只保留散列和目标，那么我认为它会工作？您当前的url看起来如何？你能在菜单中显示url是

/experties#Independent

吗？但是当它重定向到页面时，它会变为/experties#Independent。它应该仍然可以工作，因为这里

hash.substr（1）

甚至

split（'#'）[1]

在

之后获取值。请您检查一下我使用的html是否正确，它是否与您的html结构匹配？另外，请执行
console.log（window.location.hash.substr（1））
查看它给您带来了什么。HTML看起来不错，只是我没有使用引导
$('.accordion > .parentPanel:last-of-type > .panel').css('display','block');


$('.panelTrigger').click(function(e) {
    e.preventDefault();

    let $this = $(this);

    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('.panel').removeClass('show');
        $this.parent().parent().find('.panel').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

$('.panelTrigger').bind('click',function(){
    var self = this;
    setTimeout(function() {
        theOffset = $(self).offset();
        $('body,html').animate({ scrollTop: theOffset.top - 180 });
    }, 310); // ensure the collapse animation is done
});