Question

我正在为网站制作导航，并希望按钮的行为如下：

让活动按钮比其他按钮高40px。
在悬停时将按钮移动10px，除非它是活动按钮。
单击按钮时，从所有按钮中删除活动类，将所有按钮移动到原始位置，将活动类添加到单击按钮，将单击按钮移动40px以上。

这是我的jQuery代码：

$(document).ready(function(){
    $('#navigation a').not(".active")
    .mouseover(function(){
            $(this).stop().animate(
                    {top:"-10px"}, 
                    {duration:200}
            )
    })
    .mouseout(function(){
            $(this).stop().animate(
                    {top:"0px"}, 
                    {duration:200}
            )
    })
    .click(function(){
            $('#navigation a.active').animate(
                    {top:"0px"}, 
                    {duration:200}
            )
            $('#navigation a').removeClass("active");
            $(this).addClass("active");
            $(this).stop().animate(
                    {top:"-40px"}, 
                    {duration:200}
            )
    })
});

一切似乎都有效，并且正在正确地给出和删除课程。唯一的问题是not（）方法会阻止初始活动按钮，而不是那些稍后使用addClass（）获得该类的人。

Answer 1

更改

$('#navigation a').not(".active")
    .mouseover(function(){
        // ...
    }).mouseout(function() {
        // ...
    }).click(function() {
        // ...
    });

使用event delegation：

$('#navigation').on('mouseover', 'a:not(.active)', function(){
    // ...
}).on('mouseout', 'a:not(.active)', function(){
    // ...
}).on('click', 'a:not(.active)', function(){
    // ...
});

或更短：

$('#navigation').on({
    'mouseover': function(){
        // ...
    },
    'mouseout': function(){
        // ...
    },
    'click': function(){
        // ...
    }
}, 'a:not(.active)');

https://api.jquery.com/on/

jQuery：.addClass（）和.removeClass（）之后的.not（）

1 个答案: