如何在單擊時以及單擊任何其他元素和空白時刪除toggleClass？

Question

我正在使用JQuery toggleClass來更改單擊按鈕時的顏色。 再次單擊時，它應恢復為原始顏色，而在包括空格在內的其他任何位置單擊鼠標時，則應恢復為原始顏色。

我不知道該怎么做，但是下面是我設法找到並插入內容的兩個片段。

以下代碼段將在單擊按鈕時更改顏色，但再次單擊時不會恢復為原始顏色，但是在單擊任何其他元素或空白時，按鈕顏色將恢復為原始顏色：

  (function () {
$('.button_is').click(function(evt) {
    evt.stopPropagation(); //stops the document click action
    $(this).siblings().removeClass('button_addition');
    $(this).toggleClass('button_addition');
});


$(document).click(function() {
    $('.button_is').removeClass('button_addition'); //make all inactive
});
});

以下代碼段將在元素被單擊時再次切換類，當再次單擊該元素時，它將恢復為原始狀態，但是如果在其他位置單擊，則不會恢復為原始顏色：

 $(document).ready(function () {

            $(".button_is").click(function () {
                $(this).toggleClass("button_addition");
            });
        });

我可以利用這兩個摘要中的哪一個來確保當單擊按鈕時顏色會發生變化，再次單擊時顏色會恢復為原始顏色，而單擊其他元素或空白時會恢復為原始顏色？

Answer 1

你可以試試這個

$(document).ready(function () {

    $(".button_is").click(function (e) {
        e.stopPropagation();
        $(this).toggleClass("button_addition");
    });

    $(document).click(function() {
        $(".button_is.button_addition").trigger("click");
    });    

});

演示。

Answer 2

嘗試這個 -

    $(document).ready(function () {
        $(".button_is").click(function () {
            $(this).toggleClass("button_addition");
        });

        $(document).click(function(event) {
          if(!$(event.target).is('.button_is')){
            $('.button_is').removeClass('button_addition'); //make all inactive
          }
        });
  });

Answer 3

小提琴： http : //jsfiddle.net/9ZKfq/

$(document).ready(function() {

    $(document).click(function(jEvent) {    

        if (!$(jEvent.target).hasClass('button_is')) 
        {
           $('.button_is').removeClass('button_addition');
        }
        else
        {
            $(jEvent.target).toggleClass('button_addition');
        }

    });

});

Answer 4

你的第一剪對我有用。

也許您的HTML是問題？

值得注意的是，您的代碼中有錯別字（您在現成的處理程序中缺少$ ）。

看一下： http : //jsfiddle.net/URrVf/它可在Chrome，Firefox和IE9上運行。

Answer 5

嘗試這個

 $(function() {
        $('.button_is').on('click',
        function(event) {
            event.stopPropagation();
            $('.button_is').toggleClass('button_addition');
        });
        $('html').click(function() {
            $('.button_is').removeClass('button_addition');
        });
    });