Home/ Questions/Q 9212389
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:30:52+00:00

I have a sidebar toggle menu in WordPress which is working fine, however when

  • 0

I have a sidebar toggle menu in WordPress which is working fine, however when one of the toggle menu links is clicked and you are taken to the associated current page for that link, the toggle menu is closed. I am wanting it to stay open.

I have found an example of a method that works but it is more for a static site and I was wondering how I could adapt it to my own existing jQuery code, as my menu is dynamically created within WordPress. The example code method that seems to work can be found here: jsfiddle.net/LcsLr/33/

Any help would be most welcome!

Below is my current html code:

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

and my jQuery code:

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

and my 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;}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This should work for your example:

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