Question

我有同一个班级的不同按钮。每个按钮都有一个“+”：after。我想显示一个“ - ”如果单击一个按钮，当单击另一个按钮时删除“ - ”，单击窗口的其余部分或再次单击相同的按钮。

这是我到目前为止所做的：

var removeClass = true; 
$(".button").click(function () {
    /* $(".button").removeClass('bclose'); */
    $(this).toggleClass('bclose');
    removeClass = false;
});

$(".button").click(function() {
    removeClass = false;
});

$("html").click(function () {
    if (removeClass) {
        $(".button").removeClass('bclose');
    }
    removeClass = true;
});

“ - ”＆amp;如果再次单击窗口或按钮，bclose类将被删除，但如果单击其他按钮之一，则“ - ”不会删除。

如果我添加

$(".button").removeClass('bclose');

它工作正常，但如果你再次点击同一个按钮则不行。

示例：http://jsfiddle.net/tjga5/

Answer 1

你可以这样使用

$(".button").click(function () {
    $(".button").not(this).removeClass('bclose');
    $(this).toggleClass('bclose');

});

Demo

Answer 2

您可以简化代码：

$(".button").click(function (e) {
    e.stopPropagation();
    $(".button").not(this).removeClass('bclose');
    $(this).toggleClass('bclose');
});


$("body").click(function () {
    $(".button").removeClass('bclose');
});

--DEMO--

Answer 3

您必须删除bclose类，然后将该类添加到最近单击的类中。你可以这样做：

$(".button").click(function () {
   $(".button").removeClass('bclose'); 
   $(this).addClass('bclose');


   removeClass = false;
});

JsFiddle Example

Jquery - 单击按钮时切换类/单击主体上的删除类以及具有相同类的其他按钮

3 个答案:

--DEMO--