0
我在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;}