jquery點擊不添加類

Question

嘗試一個簡單的導航菜單，我知道這很簡單，但爲什麼點擊不添加類？追加只是爲了測試和工作正常。

$('.menu').on('click',function(){ 
     $(this).addClass('hovering'); 
     $(this).append('hello'); 
}); 

看到小提琴：fiddle

Answer 1

那是因爲你已經有一個類被通過懸停applyed。

你可以指定一個不同的類！這一重要如下...

JQuery的

$('.menu').on('click',function(){ 
    $(this).addClass('hovering2'); 
    $(this).append('hello'); 
}); 

CSS

.hovering2{ 
    border:#000 1px solid; 
    background:#333 !important; 
} 

link to fiddler

Answer 2

jQuery的懸停是真的兩個事件的監聽者，mouseenter和mouseleave，http://api.jquery.com/hover/

您的代碼正在工作，但是，在點擊之後，會觸發mouseleave事件（第二個函數在.hover中），這將刪除您的'.hovering'類。

在這個用例中，CSS僞選擇器也可以實現您在懸停狀態下嘗試的內容。

Answer 3

您可以在hover事件中使用toggleClass

$(".menu").hover(function() { 
    $(this).toggleClass('hovering'); 
}); 

請不就是上面可以通過CSS來實現

.menu:hover { 
    background:#737373; 
    color:white; 
    font-weight:bold; 
} 

Answer 4

類被添加，但有沒有影響，因爲其他代碼在你將它懸停時已經添加了它，並且它在離開元素時也會將其刪除。

爲點擊事件使用不同的類。

CSS：

.selected { 
    background:#737373; 
    color:white; 
    font-weight:bold; 
} 

的Javascript：

$('.menu').on('click',function(){ 
    $(this).addClass('selected'); 
}); 

重新排列CSS規則，使你首先要有.menu類，那麼當你將它們添加其他的將優先考慮。對於具有相同特性的規則，以後指定的規則優先。

演示：http://jsfiddle.net/Guffa/aXfN8/5/