Question

我有一个菜单，每个菜单项都是一个在css中设置类的范围：

.newClass {color: red}

.oldClass {color:black} oldClass:hover {color:blue;}

单击菜单项时，类更改为： $(this).removeClass('oldClass').addClass('newClass'); 哪个工作正常。

当点击另一个menuItem时，我在当前菜单项上更改了类： $(this).removeClass('newClass').addClass('oldClass');

问题是当类被更改回来时，直到我将鼠标放在菜单Item上才会反映更改。所以菜单项颜色保持红色，直到我抓住它然后它变回黑色并带有蓝色悬停。

在评论中看看Gaby的例子

这是我的实际代码：

$('.headingRev').removeClass('headingRev').addClass('heading'); $(this).removeClass('heading').addClass('headingRev');

这是css：

.heading {color: #bb1f1a;} .heading:hover {color: #e9b49e;text-decoration:none;} .headingRev {color: #e9b49e;}

Answer 1

可能的问题可能是您从当前菜单项中删除选择的方式..

如果你是在点击内部进行的话，你不应该使用this，因为this会指向被点击的元素，而不是之前的当前元素..如果是这种情况，那么你应该使用$('.newClass').removeClass('newClass').addClass('oldClass');

查看一些适用于http://www.jsfiddle.net/khGRW/

的代码

<强>更新

我现在看到..你正在使用Cufon，它用图像或画布元素替换文本..

这使得它对正常的DOM更改没有响应。

您需要在将类更改为元素（当前不在Cufon.refresh('#content')事件下）后调用hover以强制它根据以下内容重新绘制菜单DOM的当前状态。

hover效果会自动处理，因为它们支持该选项，但这是DOM监控从Cufon端结束的地方..

Answer 2

尝试这种方法：

<ul>
<li class="ordinary">Menu 1</li>
<li class="ordinary">Menu 2</li>
<li class="ordinary">Menu 3</li>
</ul>

$('ul li').click(function(){
  $('ul li').removeClass("highlight").addClass("ordinary");
  $(this).removeClass("ordinary").addClass("highlight");
});

单击菜单项时，将所有菜单项设为普通类
将点击的菜单设为突出显示类

在鼠标悬停之前，jQuery类更改不会更新

2 个答案: