在单击的对象上保持活动状态，忽略第二次单击

Question

http://jsfiddle.net/kfTFa/49/

我正在尝试设置此功能（基本上是大方块=你正在使用的那个+两个状态之间的动画）。默认状态是两个状态较小的8个方格，（较大的状态=类活动）文本区域为空。

1. 用户将鼠标悬停在任何项目上 - ＆gt;
   • square animates to greater state
   • 与悬停项目相关联的文字显示在悬停期间
2. 用户悬停在项目之外 - ＆gt;
   • 文字消失
   • square恢复为默认状态
3. 用户点击x项目 - ＆gt;
   • 该项目的文字成为新的默认
   • square保持活跃状态​​（较大尺寸）
4. 用户点击y项 - ＆gt;
   • 上一个活动项目将动画恢复为默认状态
   • 项目文字成为新的默认文字
   • 项目保持活跃的大尺寸状态

我几乎拥有它，唯一的问题是，如果你点击同一个项目两次，活动类最终会坚持一个它不应该的项目。不能完全到达那里！

第二次点击可以不执行任何操作，也可以将其取消设置为默认值（可能没有什么比这更好）。

Answer 1

DEMO：http://jsfiddle.net/kfTFa/50/

您只需添加一项检查，看它是否已经是活动项目。

if($(this).hasClass("active")) return;