Jquery首先单击addClass选中第二次单击removeClass选中

I got 4 options and I want to be able to select more than one option or remove the selected class with the second click.

我有4个选项，我希望能够选择多个选项或通过第二次单击删除所选类。

Jquery

jQuery的

$('.contact-method li a').click(function(e) {
        $('.contact-method li a').removeClass('selected');
        $(this).parent('a').addClass('selected');
        e.preventDefault();
});

html

HTML

<ul class="contact-method">
<li class="sms"><a href="javascript:void(0);">SMS</a></li>
<li class="telephone"><a href="javascript:void(0);">Telephone</a></li>
<li class="email"><a href="javascript:void(0);">Email</a></li>
<li class="post"><a href="javascript:void(0);">Post</a></li>
</ul>

Demo http://jsfiddle.net/XeELs/97/

演示http://jsfiddle.net/XeELs/97/

4 个解决方案

#1

Instead of

代替

    $('.contact-method li a').removeClass('selected');
    $(this).parent('a').addClass('selected');

simply use

简单地用

    $(this).toggleClass('selected');

#2

If you're looking to just toggle the selected class on the anchor nodes, try:

如果您只想在锚节点上切换选定的类，请尝试：

$('.contact-method li a').click(function(e) {
    e.preventDefault();            
    $(this).toggleClass('selected');
});

http://jsfiddle.net/XeELs/99/

#3

use toggleClass

使用toggleClass

$('.contact-method li a').click(function() {
        $(this).toggleClass('selected');
});

#4

Use the toggleClass method.

使用toggleClass方法。

$('.contact-method li a').click(function(e) {
    $(this).toggleClass('selected');
    e.preventDefault();
});

http://jsfiddle.net/XeELs/100/

http://api.jquery.com/toggleClass/

#1