CODEWITHSUNDEEP
jquery
StuBlackett
StuBlackett

Reputation: 3855

jQuery if li a hasClass

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

Answers (5)

Supr
Supr

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

Updated fiddle.

Upvotes: 1

Colin Bacon
Colin Bacon

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

Zoltan Toth
Zoltan Toth

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

DEMO

Upvotes: 3

amcdrmtt
amcdrmtt

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

thecodejack
thecodejack

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

Related Questions