jQuery if li hasClass

Question

我有一個顯示/隱藏菜單。這很好。但是，默認情況下菜單是關閉的，再次這是很好的，直到頁面被導航到。

當頁面導航到一個錨是建立了「活躍」的類，我想要檢查是否「活躍」與菜單exsists並顯示該塊基於此。所以至少有一個菜單總是打開的。

我現在的jQuery是如下：

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

我也取得了jsFiddle

所以我靶向如果ul.sub_menu李一=激活，如果它是顯示sub_menu。

但沒有任何運氣。在此先感謝

Answer 1

最簡單的方法是檢查是否ul.sub_menu包含a.active。如果是這樣，然後設置顯示：塊。這可以用下面的代碼完成。

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

Answer 2

請注意，最後if塊中的this不引用您認爲它指的是。此外，爲了顯示列表項目和鏈接，您還需要顯示包含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'); 

而且，一定要設置ul到active爲好。

---

順便說一句，如果你不希望管理的ul的active類，然後添加它自動顯示其中包含與.active是孩子.sub_menu：

$('.active').closest('.sub_menu').css('display','block'); 

Updated fiddle.

Answer 3

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

只有當只有一個sub_menu時纔可以使用..所以你可以使用$(this).parent().parent().css()

Answer 4

如果其中一個孩子的班級活躍，您需要顯示該列表。

$('ul.sub_menu li a.active').parents('ul').show(); // This would replace your if statement 

的代碼執行以下操作： 1.選擇帶班積極的所有鏈接。 2.查找該鏈接是其子項的列表元素。 3.顯示列表。

完整的例子：Demo

Answer 5

只需從ul.sub_menu刪除display:none，你可以做這個簡單的

$('ul.sub_menu li a:not(.active)').css('display', 'none'); 

DEMO