如何結合了懸停功能相同的狀態點擊

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

更新：看到你的鏈接和閱讀的解釋之後，我會做這種方式：

創建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); 

Answer 2

我認爲你是在談論結合兩者的懸停和點擊在一起。試試這個：

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

// do stuff 

});