Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/447.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript WordPress切换菜单-在当前页面上保持菜单打开_Javascript_Jquery_Html_Css_Wordpress - Fatal编程技术网

Javascript WordPress切换菜单-在当前页面上保持菜单打开

Javascript WordPress切换菜单-在当前页面上保持菜单打开,javascript,jquery,html,css,wordpress,Javascript,Jquery,Html,Css,Wordpress,我在WordPress中有一个侧边栏切换菜单,它工作正常,但是当单击其中一个切换菜单链接时,您将被带到该链接的相关当前页面,切换菜单将关闭。我希望它一直开着 我已经找到了一个方法的例子,但它更适合静态站点,我想知道如何使它适应我自己现有的jQuery代码,因为我的菜单是在WordPress中动态创建的。下面可以找到似乎有效的示例代码方法: 欢迎任何帮助 下面是我当前的html代码: <div class="custom-sidebar"> <div class="nav-sec

我在WordPress中有一个侧边栏切换菜单,它工作正常,但是当单击其中一个切换菜单链接时,您将被带到该链接的相关当前页面,切换菜单将关闭。我希望它一直开着

我已经找到了一个方法的例子,但它更适合静态站点,我想知道如何使它适应我自己现有的jQuery代码,因为我的菜单是在WordPress中动态创建的。下面可以找到似乎有效的示例代码方法:

欢迎任何帮助

下面是我当前的html代码:

<div class="custom-sidebar">
<div class="nav-section-wrap">
<div class="menu-air-operators-menu-container">

<ul id="menu-custom" class="custom">
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Top Level Link One" href="http://localhost/testsite/top-level-link-one/">TOP LEVEL LINK ONE</a></li>

<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent"><a title="Top Level Link Two" href="#">TOP LEVEL LINK TWO</a>
<ul style="display: none;" class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item current_page_item"><a title="Subnav Link One" href="http://localhost/testsite/subnav-link-one/">Subnav Link One</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Subnav Link Two" href="http://localhost/testsite/subnav-link-two/">Subnav Link Two</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Subnav Link Three" href="http://localhost/testsite/subnav-link-three/">Subnav Link Three</a></li>
</ul>
</li>

<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Top Level Link Three" href="http://localhost/testsite/top-level-link-three/">TOP LEVEL LINK THREE</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Top Level Link Four" href="http://localhost/testsite/top-level-link-four/">TOP LEVEL LINK FOUR</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Top Level Link Five" href="http://localhost/testsite/top-level-link-five/">TOP LEVEL LINK FIVE</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Top Level Link Six" href="http://localhost/testsite/top-level-link-six/">TOP LEVEL LINK SIX</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Top Level Link Seven" href="http://localhost/testsite/top-level-link-seven/">TOP LEVEL LINK SEVEN</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a title="Top Level Link Eight" href="http://localhost/testsite/top-level-link-eight/">TOP LEVEL LINK EIGHT</a></li>
</ul>

</div>
</div>
</div>
还有我的CSS:

div.custom-sidebar div.custom-links-wrap {background: url('images/links-bgr.png') repeat; padding: 14px 14px 14px 0px;}
div.custom-sidebar div.custom-links-wrap ul li {font-weight: bold; background: none; padding-left: 18px; padding-top: 6px; padding-bottom: 6px;}
div.custom-sidebar div.custom-links-wrap ul li.current-menu-item {background: url('images/links-current.png') no-repeat 0px 2px;}

div.custom-sidebar div.custom-links-wrap ul li ul {margin-left: -18px;}
div.custom-sidebar div.custom-links-wrap ul li ul li {font-weight: normal; padding-left: 36px;}
div.custom-sidebar div.custom-links-wrap ul li ul li:last-child {padding-bottom: 0px;}
div.custom-sidebar div.custom-links-wrap ul li ul li.current-menu-item {background: url('images/links-current.png') no-repeat 0px 2px;}

这应该适用于您的示例:

$('.sub-menu').hide();
$("li:has(ul)").click(function(){
  $("ul",this).slideDown();
});

$('#menu-custom ul li ul.sub-menu li a').click(function(e){
  if ($(this).attr('class') != 'active'){
    $('#menu-custom ul li a').removeClass('active');
    $(this).addClass('active');
  }
});

$('a').filter(function(){
  return this.href === document.location.href;
}).addClass('active');

$("ul.sub-menu > li > a").each(function () {
  var currentURL = document.location.href;
  var thisURL = $(this).attr("href");
  if (currentURL.indexOf(thisURL) != -1) {
    $(this).parents("ul.sub-menu").css('display', 'block');
  }
});

$('#menu-custom > ul > li > a').each(function(){
  var currURL = document.location.href;
  var myHref= $(this).attr('href');
  if (currURL.match(myHref)) {
    $(this).parent().find("ul.sub-menu").css('display', 'block');
  }
}); 
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
  $("ul",this).slideDown();
});

$('#menu-custom ul li ul.sub-menu li a').click(function(e){
  if ($(this).attr('class') != 'active'){
    $('#menu-custom ul li a').removeClass('active');
    $(this).addClass('active');
  }
});

$('a').filter(function(){
  return this.href === document.location.href;
}).addClass('active');

$("ul.sub-menu > li > a").each(function () {
  var currentURL = document.location.href;
  var thisURL = $(this).attr("href");
  if (currentURL.indexOf(thisURL) != -1) {
    $(this).parents("ul.sub-menu").css('display', 'block');
  }
});

$('#menu-custom > ul > li > a').each(function(){
  var currURL = document.location.href;
  var myHref= $(this).attr('href');
  if (currURL.match(myHref)) {
    $(this).parent().find("ul.sub-menu").css('display', 'block');
  }
});