动画菜单中的多个滑动潜水

Multiple Sliding Divs from Animated Menu

本文关键字：潜水 菜单 动画      更新时间：2023-09-26

所以，我想要的效果是：

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

这正是我想要的功能。但是，我想用动画菜单取代简单的链接单词。

我的编码目前是这样的：

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

潜水艇没有出现！javascript与调用div相同。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);
    }
});

如果能在这里得到任何支持，我将不胜感激。

更改HTML会使next('.box')函数无法工作。next('.box')查找与选择器匹配的下一个同级，在本例中是单击的<a>标记。由于长方体不再是同级，因此函数找不到任何元素。

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

相关文章：