Question

我尝试添加点击功能，但它没有运行...

$("#menu2 li").hover(function() { //On hover... 

    $(this).find("span").stop().animate({ 
        marginTop: "-40" //Find the span tag and move it up 40 pixels 
    }, 250); 

    $("#menu2 li").click(function() { //On click... 
        $(this).find("span").stop().animate({ 
            marginTop: "-40" //Find the span tag and move it up 40 pixels 
        }, 250); } 
        , function() { //On hover out... 
            $(this).find("span").stop().animate({ 
                marginTop: "0" //Move the span back to its original state (0px) 
            }, 250); 
        }); 
});

这是链接：after click, i hope it still be white color

Answer 1

我认为你在谈论将悬停和点击绑定在一起。试试这个：

$('#menu2 li').bind('click hover', function(){

// do stuff

});

Answer 2

更新：在看到您的链接并阅读说明后，我会这样做：

创建一个CSS类selected：

.selected span {
    marginTop: "-40";
}

在点击时将该类添加到元素中，如果未选择该元素，则仅执行mouseleave操作：

$("#menu2 li").click(function() {
    if(!$(this).hasClass('selected')) {
        $(this).siblings('.selected').removeClass('selected').mouseleave();
        $(this).addClass('selected');
    }
}).hover(function() {
    $(this).find("span").stop().animate({ 
        marginTop: "-40" //Find the span tag and move it up 40 pixels 
    }, 250); 
}, function() {
    if(!$(this).hasClass('selected')) {
        $(this).find("span").stop().animate({ 
            marginTop: "0" //Move the span back to its original state (0px) 
        }, 250);
    }
});

我为你创建了DEMO。

旧回答：

应该是：

function mouseEnterHandler {
    $(this).find("span").stop().animate({ 
        marginTop: "-40" //Find the span tag and move it up 40 pixels 
    }, 250); 
}

function mouseLeaveHandler() {
    $(this).find("span").stop().animate({ 
        marginTop: "0" //Move the span back to its original state (0px) 
    }, 250);
}

$("#menu2 li").click(mouseEnterHandler)
              .hover(mouseEnterHandler, mouseLeaveHandler);

如何将点击与悬停功能组合在同一状态？

2 个答案: