Question

I have a show/hide menu built. Which works great. But by default the menu is closed, again this is fine until the page is navigated to.

When the page is navigated to the a anchor is built with the class of “active”, What I would like to is check if “active” exsists with the menu and display that block based on that. So at least one menu is always open.

My current jQuery is as follows :

    $('.sub_menu').hide();
$('.clickable').toggle(function(){
    $(this).next('ul').slideToggle();
    $(this).css('background-position','0px -12px');
}, function()
{
    $(this).next('ul').slideToggle();
    $(this).css('background-position','0px 5px');       
});

if ($('ul.sub_menu li a').hasClass('active')) {
    $(this).css('display','block');
}

I have also made a jsFiddle

So I am targetting if the ul.sub_menu li a = active and if it is show the sub_menu.

But not having any luck with it. Thanks in advance

Answer 1

The easiest approach to this is to check if ul.sub_menu contains an a.active. If so then set display: block. This can be done with the following code.

$('.sub_menu').hide();
$('.clickable').toggle(function (){
    $(this).next('ul').slideToggle();
    $(this).css('background-position', '0px -12px');
}, function (){
        $(this).next('ul').slideToggle();
        $(this).css('background-position', '0px 5px');
});

$('ul.sub_menu').has('a.active').css('display', 'block');