滑动子导航不起作用答案

【问题标题】：Sliding of subnav doesn't work滑动子导航不起作用
【发布时间】：2014-04-09 05:42:18
【问题描述】：

我的代码有问题，因为 level_1 和 level_2 子导航在点击时不会滑动。例如：如果我单击 h2 子导航 level_1 并且如果我单击父 level_1 的 li level_2 子导航将向下滑动。

Javascript

$('.nav_item > h2').click(function(){
    if ($(this).attr('class') != 'active'){
        $('.nav_item ul').slideUp();
        $(this).next().slideToggle();
        $('.nav_item ul).removeClass('active');
        $(this).addClass('active');
    }
});

小提琴

http://jsfiddle.net/sT3TC/5/

【问题讨论】：

将css添加到jsfiddle中
小提琴似乎不起作用
我更改了 som css 和 js，但仍然无法正常工作 jsfiddle.net/sT3TC/4
我更新了我的问题，子导航不会滑动

标签： jquery slideup

【解决方案1】：

你可以这样做：

CSS：

.wrap {display: none;}
.active {color: blue;}

jQuery:

$('.nav_item > h2').click(function () {
    if ($(this).attr('class') != 'active') {
        var wrap = $(this).next();
        $('.wrap').not(wrap).slideUp();
        $(this).next().slideToggle();
        $('.nav_item > h2').removeClass('active');
        $(this).addClass('active');
    }
});

Updated Fiddle

【讨论】：

谢谢，但是“level_2”子导航应该只在我点击“子菜单”类的li时才显示，我该怎么做？
我尝试更改 slideUp 类“.wrap > ul > .level_1”，但现在切换效果出现问题：jsfiddle.net/sT3TC/8

【解决方案2】：

您在 jsFiddle 上遗漏了一个括号，请在更新后的 jsFiddle 上找到正确的括号。

显然，我不相信您在 if 语句中指向正确的 DOM 资源。可以考虑换成

$(this).find('ul')

jQuery find()

http://jsfiddle.net/sT3TC/6/

【讨论】：