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

问题描述

我有一个包含三个内容区域的手风琴。当有人单击附加到 url (/expertise#target) 的锚点的菜单项时，我想激活相对手风琴。我的手风琴的设置方式是将 .show 添加到面板 .panel 中，点击标题元素 .panelTrigger。我试图弄清楚如何根据 url 末尾的 #target 连接触发。另一个问题是 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>

JS

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

我知道这是可能的，只需要弄清楚如何连接触发器或将 .show 添加到 #target 面板。谢谢！

解决方法

当您的页面加载时，您可以在 hash 之后获取值，然后使用此值只需将 show 类添加到面板并切换相同。

演示代码：

$(document).ready(function() {
  //let url = window.location.hash.substr(1)
  //var to_open = "#" + url;
  //this is just for demo...
  let url = "www.someth.com/somehtins#xyz";
  var to_open = "#" + url.split('#')[1];
  $(to_open).prev().addClass('active')
  $(to_open).addClass("show") //add class where id matches
  $(to_open).slideToggle(350); //show that
})

.panel {
  display: none
}

.active {
  color: red
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordion">
  <div class="parentPanel item-1">
    <a class="panelTrigger" href="#abc">
    Soemthing..
    </a>

    <div class="panel" id="abc">
      <div class="greenLine"></div>
      <img src="<?php the_sub_field('logo'); ?>" />
    </div>

    <div class="parentPanel item-2">
      <a class="panelTrigger" href="#xyz">
       Soemthings xyz
      </a>

      <div class="panel" id="xyz">
        <div class="greenLine"></div>
        xyzz
        <img src="<?php the_sub_field('logo'); ?>" />
      </div>
    </div>