保持手风琴子菜单打开自定义WordPress主题中的页面更改

Question

我有一个客户站点，它要求侧面菜单像手风琴一样工作，单击父级后子菜单会下拉，并在父级或任何子菜单处于活动状态时保持打开状态。菜单是用PHP创建的，其内容来自服务部分。菜单是自定义主题的一部分，已插入到多个页面模板中。作为主题的一部分，我想避免更改模板php代码。 （不确定主题的更新频率）我尝试使用css和jQuery，但是到目前为止，仅在onclick之后短暂地打开了子菜单，然后在页面加载时消失了。

您可以在https://www.birchandco.com处看到站点-目前处于悬停状态，以便访问者可以导航。一旦使用onclick正常工作，将删除此文件。

PHP模板

<div class="home_services">
                        <?php 
                            $ser= new WP_Query(array(
                                'post_type'=>'service',
                                'posts_per_page' => -1, 
                                'orderby' => 'name',
                                'order' => 'ASC',                                   
                                'meta_query' => array(
                                   array(
                                       'key' => '_is_ns_featured_post',
                                       'value' => 'yes',
                                   )
                                )                                   
                            ));

                        ?>
                        <ul class="service_list">
                            <?php 
                                if($ser->have_posts()) :
                                while($ser->have_posts())  : $ser->the_post();
                            ?>
                                <li class="item">
                                    <a href="<?php the_permalink(); ?>"><?php the_title();?> <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
                                    <?php if(get_the_terms(get_the_ID() , 'service_category')[0]->term_id) {?>
                                        <ul class="submenu">
                                        <?php
                                        $args = array(
                                            'post_type' =>'service',                                                    
                                            'orderby' => 'name',
                                            'order' => 'ASC',                                                                                       
                                            'post__not_in' => array(get_the_ID()),
                                                'tax_query' => array(
                                                array(                      
                                                'taxonomy' => 'service_category',
                                                'field' => 'term_id',                                                       
                                                'terms' => get_the_terms(get_the_ID() , 'service_category')[0]->term_id
                                                )
                                            )
                                        );
                                        $query = new WP_Query( $args ); 
                                        $loop = new WP_Query( $args );
                                        if( $loop->have_posts() ): 
                                         while ( $loop->have_posts() ) : $loop->the_post();
                                         ?>
                                         <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                                         <?php
                                         endwhile; wp_reset_postdata();
                                          endif;
                                        ?>
                                        </ul>           
                                  <?php } ?>
                                </li>
                            <?php
                                endwhile;
                                wp_reset_postdata(); 
                                endif;
                            ?>
                        </ul>

                    </div>

CSS

这是子菜单当前悬停状态的CSS

.home_services ul.service_list > li:hover ul.submenu{
display: block;
opacity:1;
visibility:visible;}

JQuery

这是我设法开始使用的代码，但是它只能切换子菜单。一旦执行了onclick事件并加载了页面，该子菜单就会消失。

jQuery(document).ready(function($){
var body = $('body');
$('.home_services ul.service_list li a').on('click', 
function(event){
    event.preventDefault();
    // create accordion variables
    var accordion = $(this);
    var accordionContent = accordion.next('.home_services 
 ul.service_list > li ul.submenu');

    // toggle accordion link open class
    accordion.toggleClass("open");
    // toggle accordion content
    accordionContent.slideToggle(250);

});
});

任何帮助将不胜感激。

我已经看到了可能的jquery解决方案，但是我不确定如何将以下代码应用于我的情况。如果您能提供帮助，将不胜感激。

$('.home_services ul.service_list li a').click(function(e){
  ... 

  localStorage.setItem("activeSubMenu", $(this).text());
  });
  On page load, read the localStorage and expand the menu (if found):
  $(document).ready(function(){
var activeItem = localStorage.getItem("activeSubMenu");
if(activeItem){
    $('.home_services ul.service_list li a').filter(function() {
        return $(this).text() == activeItem;
    }).slideToggle();
 }
 });

Answer 1

没有回答您的问题。但是尝试

<div class="container">
  <div class="panel-group" id="accordionMenu" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Menu 0
        </a>
      </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Menu 1
        </a>
      </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Menu 2
        </a>
      </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a></li>
            <li><a href="#">item 4</a></li>
          </ul>
        </div>
      </div>
    </div>


    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingFour">
        <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Menu 3
        </a>
      </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
          <ul class="nav">
            <li><a href="#">item 1</a></li>
            <li><a href="#">item 2</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 2

在页面加载时，进行测试以查看URL是否包含您的手风琴链接到的路径之一。如果是这样，请打开该手风琴。像这样的东西：