Question

我有一个显示/隐藏菜单。哪个效果很好。但默认情况下菜单已关闭，在页面导航到该页面之前，这一点很好。

当页面导航到一个锚时，使用“活动”类构建一个锚点，我想要检查“活动”是否存在于菜单中并根据该块显示该块。因此，至少有一个菜单始终处于打开状态。

我目前的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 li a = active并且是否显示sub_menu。

但没有运气。提前致谢

Answer 1

只需从您的display:none中移除ul.sub_menu即可，您可以执行简单的

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

DEMO

Answer 2

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

请注意，上一个this块中的if并未引用您认为的内容。此外，为了显示列表项和链接，您还需要显示包含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。

顺便说一句，如果您不想管理active上的ul课程，请添加此课程以自动显示包含{{1}的孩子的所有.sub_menu }：

.active

Updated fiddle.

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是否包含a.active。如果是，则设置display：block。这可以使用以下代码完成。

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

jQuery如果是一个hasClass

5 个答案: