I have a client site that requires the side menu to act like an accordion with the sub-menu's dropping down after the parent is clicked and staying open while the parent or any of the sub-menu's is active.(我有一个客户站点，该站点要求侧面菜单像手风琴一样工作，单击父级后子菜单会下拉，并在父级或任何子菜单处于活动状态时保持打开状态。)
The menu is created in PHP with the content for the buttons taken from the service section.(菜单是用PHP创建的，其内容来自服务部分。) The menu is part of the custom theme and has been inserted into several page templates.(菜单是自定义主题的一部分，已插入到多个页面模板中。) As is part of the theme I would like to avoid changing the template php code.(作为主题的一部分，我想避免更改模板php代码。) (not sure how often the theme will be updated) I have tried css and jQuery but so far have only managed to keep the sub-menu open briefly after the onclick then disappears when page loads.(（不确定主题的更新频率）我尝试使用CSS和jQuery，但到目前为止，仅在onclick之后短暂地打开了子菜单，然后在页面加载时消失了。)
You can see the site at https://www.birchandco.com - There is a hover state at the moment so that visitors can navigate.(您可以在https://www.birchandco.com上看到该站点-目前处于悬停状态，以便访问者可以导航。)
This would be removed once is working properly with an onclick.(一旦使用onclick正常工作，将删除此文件。)
PHP Template(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)
This is the CSS for the current hover state for the submenu(这是子菜单当前悬停状态的CSS)
.home_services ul.service_list > li:hover ul.submenu{
display: block;
opacity:1;
visibility:visible;}
JQuery(jQuery查询)
This is the code that I managed to get to work but it only toggles the sub-menu.(这是我设法开始使用的代码，但只切换了子菜单。)
Once the onclick event has been executed and the page loads then the sub-menu disappears.(一旦执行了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);
});
});
Any help will be most appreciated.(任何帮助将不胜感激。)
I have seen a possible jquery solution but I am not sure how to apply the below code to my situation.(我已经看到了可能的jquery解决方案，但是我不确定如何将以下代码应用于我的情况。)
If you can help it would be very much appreciated.(如果您能提供帮助，将不胜感激。)
$('.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();
}
});
ask by Andrew Paton translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
