javascript - 动画菜单中的多个滑动 div

Question

所以，我想要的效果是：

http://jsfiddle.net/SCKhf/428/

这完全符合我的要求。但是，我想用动画菜单替换简单的链接词。

我的编码目前是这样的：

http://jsfiddle.net/M8UgQ/4/

div不显示！调用 div 的 javascript 是相同的。javascript 编码的唯一区别是添加了悬停动画。

var open = $('.open'),
a = $('ul').find('a');

console.log(a.hasClass('active'));

open.click(function(e){
    e.preventDefault();
    var $this = $(this),
        speed = 500;
    if($this.hasClass('active') === true) {
        $this.removeClass('active').next('.box').slideUp(speed);
    } else if(a.hasClass('active') === false) {
        $this.addClass('active').next('.box').slideDown(speed);
    } else {
        a.removeClass('active').next('.box').slideUp(speed);
        $this.addClass('active').next('.box').delay(speed).slideDown(speed);
    }
});

我将非常感谢这里的任何支持。

Answer 1

更改您的 HTML 会使您的next('.box')功能无法正常工作。 next('.box')找到下一个与选择器匹配的兄弟，在这种情况下<a>是被点击的标签。由于该框不再是同级，因此该函数找不到任何元素。

我已更改next('.box')为.parent().parent().find('.box')框，它似乎可以按需要工作：http: //jsfiddle.net/M8UgQ/7/