javascript - 在自定义 WordPress 主题中的页面更改时保持 Accordion 子菜单打开

Question

我有一个客户端站点，需要侧面菜单像 Accordion 一样工作，在单击父菜单后子菜单会下拉，并在父菜单或任何子菜单处于事件状态时保持打开状态。该菜单是用 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

我设法找到了一个解决方案，可以在页面更改时保持子菜单打开。我删除了现有菜单的 PHP 代码并将其替换为

`<?php //echo do_shortcode("[widget id=nav_menu-3]"); ?>` 

此 [widget id=nav_menu-3] 短代码是通过小部件短代码创建器插件创建的。我使用 WordPress 菜单系统来构建菜单，然后通过导航菜单小部件访问菜单，并将其添加到短代码部分，以便为小部件创建短代码。上面的代码允许您将短代码添加到 PHP 模板。

这使我能够将 WordPress 菜单添加到自定义页面模板中。下一步是设置菜单样式，使其看起来像原始菜单，然后通过 CSS 定位当前菜单项、父菜单和子菜单，以便子菜单在页面更改时保持打开状态。请参阅下面的代码

`/*--- show or hide sub navs based on the parent menu item or the current menu item
----------------------------------------------- */

.widget_nav_menu ul li.current-menu-item ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-item ul.sub-menu li ul.sub-menu 
{display:none;}

.widget_nav_menu ul li.current-menu-parent ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li ul.sub-menu 
{display:none;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item 
ul.sub-menu {display:block;}

.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item 
ul.sub-menu {display:block;}
.widget_nav_menu ul li.current-menu-parent ul.sub-menu li.current-menu-item 
ul.sub-menu li ul.sub-menu {display:none;}`

之后，我向父级添加了一个伪元素(双箭头)以指示有子菜单。

`/*Sub-Menus Pseudo Element - Add to Customise Header
--------------------------------------------- */

ul#menu-services.menu li a:after {
    content: '»';
    font-size: 31px;
    float: right;
  transform: rotate(90deg); -- Turns arrows around so point downwards.
}`