第二次单击时jQuery删除类并在第二次单击时禁用悬停

Question

当你第二次点击复选框时,我试图删除课程'活跃',就像用户添加一个图钉时Pinterest为Twitter/Facebook复选框所做的那样:

在点击上添加"活动"类很容易.但是,一旦添加它,我无法想象如何删除它.我试过这个,但它不起作用:

$(".add_link_twitter.active").click(function(e) {  
      $(this).removeClass(activePostTwitter); 
    });

我有两个问题:

1. 如何在第二次单击复选框时删除'active'css类？
2. 如何选中Twitter复选框时禁用'.add_link_twitter:hover'？

提前致谢!

这是jQuery:

var postTwitter = ".add_link_twitter"; 
var activePostTwitter = "active"; 
$(postTwitter).click(function(e) {  
  $(this).addClass(activePostTwitter); 
});

这是html:

<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>

这是css:

.add_link_twitter{
    position:absolute;
    left:15px;
    bottom:16px;
    color: #a19486;
    border: 2px solid transparent;
    border-color: #F0EDE8;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.active {
    border-color: #468BD0;
    color: #468BD0;
    background-color: whiteSmoke;
}

.add_link_twitter:hover
{
    color: #A19486;
    border: 2px solid transparent;
    border-color: #C2B1A2;
    border-radius: 4px;
    background-color: white;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Answer 1

代替

$(postTwitter).click(function(e) {  
  $(this).addClass(activePostTwitter); 
});

使用

$(postTwitter).click(function(e) {  
  $(this).toggleClass(activePostTwitter); 
});

编辑:

该事件每次点击触发两次,可能是因为事件传播.要解决此问题,请将处理程序分配给input并更改其父级的类:

$(postTwitter + " input").click(function(e) {
    $(this).parent().toggleClass(activePostTwitter);
});

确认jsfiddle:http://jsfiddle.net/bpfqB/