2

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

当页面导航到使用“活动”类构建的锚点时，我想要检查菜单是否存在“活动”并基于此显示该块。所以至少有一个菜单总是打开的。

我当前的 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。

但没有任何运气。提前致谢

4

5 回答 5

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..else 您可以使用时才有效$(this).parent().parent().css()

于 2012-10-22T11:44:09.477 回答
3

只需display:none从您的中删除，ul.sub_menu您就可以做一个简单的

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

演示

于 2012-10-22T11:48:45.753 回答
1

最简单的方法是检查 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');
于 2012-10-22T12:07:45.423 回答
1

如果其中一个孩子的课程处于活动状态，您需要显示该列表。

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

该代码执行以下操作： 1. 选择所有类活动的链接。2. 找到链接是子元素的列表元素。3. 显示列表。

一个完整的例子：演示

于 2012-10-22T11:45:26.330 回答
1

请注意，this最后一个if块中的 the 并不是您认为它所指的内容。此外，为了显示列表项和链接，您还需要显示包含ul. 试试这个：

$('.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添加此内容以自动显示任何.sub_menu包含以下内容的孩子.active：

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

更新了小提琴。

于 2012-10-22T11:39:30.803 回答