WordPress的切换菜单 - 保持菜单打开当前网页

问题描述：

我在WordPress的侧边栏切换菜单这是工作的罚款，但是当切换菜单链接的一个点击，你会被带到相关的当前页面为链接，切换菜单关闭。我希望它保持开放。WordPress的切换菜单 - 保持菜单打开当前网页

我发现了一个可以工作的方法的例子，但它更适用于静态网站，我想知道如何将它应用到我自己现有的jQuery代码中，因为我的菜单是在WordPress中动态创建的。这似乎工作的代码示例方法可以在这里找到：jsfiddle.net/LcsLr/33/

任何帮助将是非常欢迎！

下面是我当前的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>

和我的jQuery代码：

(function($) { 

// Sidebar Navigation 
$(document).ready(function() { 

    // Hide the sub menu items first 
    $("div.custom-sidebar div.custom-links-wrap ul > li > ul").hide(); 

    // On click 
    $('div.custom-sidebar div.custom-links-wrap ul > li > a').click(function() { 
     if($('ul', $(this).parent()).children().length) { 
      $('ul', $(this).parent()).slideToggle("slow"); 
      return false; 
     } else { 
      return true; 
     } 
    }); 

    $('div.custom-sidebar div.custom-links-wrap ul > li').click(function(e) { 
     if ($(e.target).is("li")) { 
      $('ul', this).slideToggle("slow"); 
      return false; 
     } else { 
      return true; 
     } 

    }); 

    }); 

})(jQuery);

和我的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'); 
    } 
});

WordPress的切换菜单 - 保持菜单打开当前网页

相关推荐