Reputation: 3855
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
Upvotes: 2
Views: 18565
Reputation: 19042
Note that the this
in the last if
block does not refer to what you think it refers to. Also, in order for the list item and link to be displayed, you will also need to display the containing ul
. Try this:
$('.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');
});
$('.active').css('display','block');
And, make sure you set the ul
to active
as well.
By the way, if you don't want to manage the active
class on the ul
then add this to automatically show any .sub_menu
which contains a child with .active
:
$('.active').closest('.sub_menu').css('display','block');
Upvotes: 1
Reputation: 15619
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');
Upvotes: 1
Reputation: 47685
Just remove display:none
from your ul.sub_menu
and you can do a simple
$('ul.sub_menu li a:not(.active)').css('display', 'none');
Upvotes: 3
Reputation: 1253
You need to show the list if one of the children has the class active.
$('ul.sub_menu li a.active').parents('ul').show(); // This would replace your if statement
The code does the following: 1. Select all links with class active. 2. Find the list element which the link is a child of. 3. Show the list.
A full example: Demo
Upvotes: 1
Reputation: 13379
$('.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')) {
$('.sub_menu').css('display','block');
}
this work only if there is only one sub_menu..else you can use $(this).parent().parent().css()
Upvotes: 3