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

我有一个客户端站点，它要求侧菜单像手风琴一样，在单击父菜单后，子菜单将下拉，并且在父菜单或任何子菜单处于活动状态时保持打开状态。菜单是用PHP创建的，其中按钮的内容取自服务部分

菜单是自定义主题的一部分，已插入到多个页面模板中。作为主题的一部分，我希望避免更改php代码模板。我不确定主题多久更新一次，我尝试了css和jQuery，但到目前为止，只在onclick之后保持子菜单短暂打开，然后在页面加载时消失

您可以在上看到该站点-此时有一个悬停状态，以便访问者可以导航。一旦使用onclick正常工作，将删除此项

PHP模板：

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);

});
});

任何帮助都将不胜感激

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

我已经看到了一个可能的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();
 }
 });

---

没有回答你的问题。但是试试看

<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>

---

在页面加载时，测试URL是否包含手风琴链接到的路径之一。如果是这样，打开手风琴。大概是这样的：

(function($) {

  $(document).ready(function() {

    // Get the current path (for instance, "/service/contesting-a-will-2/")
    var pathName = window.location.pathname;

    // This is a bit complex, but we're concatenating the pathName variable
    // into your selector so we can find a match and toggle the "open" class
    $('.home_services ul.service_list li a[href*="' + pathName + '"]').toggleClass('open');
  });

})(jQuery);

请注意，我还没有对此进行测试，但总体思路是将accordion中的href属性与我们从URL生成的路径名变量相匹配，然后打开该accordion项目。添加[href*=…意味着选择包含的所有标记，然后传入从window.location.pathname获得的路径

---

在所有条件相同的情况下，当页面完成加载时，这应该会打开手风琴，这基本上实现了在页面加载时打开的目标。

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

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

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

`/*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.
}`

---

请让我知道，如果你有任何困难实现这一点。嗨，Jass谢谢你的答复不幸的是，我不能在这种情况下更换php创建的菜单，因为它是与一个自定义帖子类型，然后会停止工作集成。如果没有其他选项，我可能只需要使用WordPress自定义菜单，并替换自定义帖子类型但是我宁愿不这样做，因为这会为我带来更多的工作。如果accordion的项目总是映射到一个唯一的URL，那么在页面加载时添加一些条件代码，以编程方式打开正确的accordion选项卡。换句话说，在页面加载时测试URL并打开正确的accordion项目。谢谢您将查看并在之前给出。让我知道如果它有效的话。你可能会想在其中添加一些条件，这样它就不会在所有页面上触发并最终出错。只是想告诉你我可能会采取的方法的要点。

`/*--- 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.
}`