Javascript 如何在单击时以及单击任何其他元素和空白时删除toggleClass？

我使用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");
            });
        });

我可以利用这两个片段中的哪一个来确保单击按钮时颜色发生变化，再次单击按钮时颜色恢复为原始颜色，单击其他元素或空白时颜色恢复为原始颜色

试试这个-

    $(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
          }
        });
  });

试试这个-

    $(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
          }
        });
  });

小提琴：

小提琴：

你可以试试这个

$(document).ready(function () {

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

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

});

你可以试试这个

$(document).ready(function () {

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

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

});

---

你的第一个剪子对我很有用

也许你的HTML就是问题所在

值得注意的是，您的代码中有一个输入错误（您缺少ready处理程序上的

$

）

看看这个：

---

它可以在Chrome、Firefox和IE9上运行。

你的第一个剪贴对我来说很有用

也许你的HTML就是问题所在

值得注意的是，您的代码中有一个输入错误（您缺少ready处理程序上的

$

）

看看这个： 它可以在Chrome、Firefox和IE9上使用。

试试这个

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

试试这个

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