0

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

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

4

5 回答 5

2

你可以试试这个

$(document).ready(function () {

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

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

});

演示。

于 2013-04-16T19:19:37.163 回答
1

小提琴：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');
        }

    });

});
于 2013-04-16T19:09:47.413 回答
1

尝试这个 -

    $(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
          }
        });
  });
于 2013-04-16T19:00:31.627 回答
1

你的第一个片段对我有用。

也许您的 HTML 是问题所在？

值得注意的是，您的代码中有一个错字（您缺少$on ready 处理程序）。

看看这个： http: //jsfiddle.net/URrVf/ 它适用于 Chrome、Firefox 和 IE9。

于 2013-04-16T19:24:43.167 回答
1

尝试这个 

 $(function() {
        $('.button_is').on('click',
        function(event) {
            event.stopPropagation();
            $('.button_is').toggleClass('button_addition');
        });
        $('html').click(function() {
            $('.button_is').removeClass('button_addition');
        });
    });
于 2013-04-16T19:24:45.127 回答