Question

我制作了两个框，其背景将在悬停和活动状态下更改。这是我的工作： http://jsfiddle.net/3Vbz8/

在那里，当我点击＆＃34;一个＆＃34;它将设置为它的活动状态（绿色背景）。没关系。当我点击＆＃34; Two＆＃34;时，它将设置为活动状态和＆＃34;一个＆＃34;将返回到它之前的状态（灰色背景）。这对我也没问题。

但是，我想要＆＃34;一个＆＃34;设置为活动状态，那时，如果我点击＆＃34; One＆＃34;，它也将返回到它的正常状态（灰色背景）。类似的事件应该发生在＆＃34; Two＆＃34;太。我该怎么做？

我的应用脚本：

$('.toggle').click(function(){
   $('.toggle').removeClass("active");
   $(this).toggleClass("active");
});

........... UPDATE ...........

克里希纳帮我解决了这个问题：http://jsfiddle.net/3Vbz8/1/

$('.toggle').click(function(){
   $('.toggle').not(this).removeClass("active");
   $(this).toggleClass("active");
});

我注意到了一个应该为我的项目更新的问题。那个问题是：如果＆＃34;一个＆＃34;已开启＆＃34;活跃＆＃34;州，那时，如果有任何用户点击＆＃34; One＆＃34;，它将返回到它的原始状态。但是，如果用户没有从该按钮上移除他/她的鼠标指针，该按钮也会出现在绿色背景上。这是悬停颜色。因此，如果任何用户一次又一次地点击按钮，他/她将不会理解状态是否改变，除非他/她移动他/她的指针。

所以，我需要（当鼠标指针不被用户移动时）：如果有人点击＆＃34; One＆＃34;按钮，它变成＆＃34;绿色背景＆＃34;。如果用户点击＆＃34; One＆＃34;再次，它将转向＆＃34;灰色背景＆＃34; （了解更改用户不必移动他/她的鼠标指针）。如果用户一次又一次地点击按钮而不移动他/她的鼠标指针

，则简短的悬停颜色应该是无效的

Answer 1

使用not(this) Documentation

http://jsfiddle.net/3Vbz8/1/

$('.toggle').click(function(){
   $('.toggle').not(this).removeClass("active");
   $(this).toggleClass("active");
});

编辑：

我喜欢@Roko C.Buljan触摸CSS以区分悬停与点击（在评论中）

http://jsfiddle.net/3Vbz8/8

.toggle:hover {
    background: #888;
}

.toggle.active{
    background: green;
}

如何通过鼠标单击删除活动类

1 个答案: