jquery单击不添加类

Question

尝试一个简单的导航菜单，我知道这很简单，但为什么点击不添加类？附加只是为了测试而且工作正常。

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

请参阅小提琴：fiddle

Answer 1

那是因为你已经将这个类应用于悬停。

您可以使用！important指定另一个类，如下所示......

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

您可以在toggleClass活动

上使用hover

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

请注意，上述内容可以通过css

完成

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

Answer 3

该类已添加，但由于其他代码在您将其悬停时已添加该类，因此无效，并且当您离开该元素时它也会将其删除。

为点击事件使用其他类。

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/

Answer 4

jQuery hover实际上是两个事件的监听器，mouseenter和mouseleave，http://api.jquery.com/hover/

您的代码正在运行，但是，单击后会触发mouseleave事件（.hover中的第二个函数），这将删除您的“.hovering”类。

在这个用例中，CSS伪选择器也可以实现你在悬停状态下尝试的内容。