Как удалить 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

Попробуйте

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

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

Fiddle: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

Вы можете попробовать это

$(document).ready(function() { 

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

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

}); 

DEMO.

Answer 5

Ваш первый снип работает для меня.

Возможно, ваш HTML-проблема?

Стоит отметить, что в вашем коде есть опечатка (вам не хватает $ на готовом обработчике).

Посмотрите на это: http://jsfiddle.net/URrVf/ Работает на Chrome, Firefox и IE9.