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/