Нажмите снаружи, чтобы отключить кнопку только тогда, когда кнопка была нажата до

Question

Кнопка может изменить свой цвет с плюса (зеленый) на минус (красный), нажав на нее.Я хочу щелкнуть снаружи, чтобы изменить его на зеленый, только когда кнопка красная.

HTML

<button class="button13"></button>

CSS

.button13 {
  width: 25px;
  height: 25px;
  background: #70975B;
  margin-top: 30px;
  margin-left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 100%;
  cursor: pointer;
  z-index: 100;
  transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}

.button13:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 50%;
  background: white;
}

.button13:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  width: 2px;
  background: white;
}

.button13.clicked {
  transform: translate(-50%, -50%) rotate(360deg);
  background: #CC2A41;
}

.button13.clicked:before {
  width: 0;
}

JS

$(".button13").click(function() {
  $(this).toggleClass("clicked");

});

Поэтому я добавляю еще одну функцию, чтобы при нажатии на кнопку снаружиможно также нажать.

$(document).click(function (e) {
    if (!$(e.target).is('.button13')) {
        $('.button13').toggleClass("clicked");
    }
})

Но оказывается, что независимо от того, является ли кнопка красной или зеленой, кнопка будет нажата.Я думал создать переменную и написать алгоритм, подобный следующему:

int buttonstate = 0;
if(the button is clicked){
$(this).toggleClass("clicked");
buttonstate = 1;
}

if(click outside and buttonstate ==1){
$(this).toggleClass("clicked");
buttonstate = 0;
}

Я не уверен, что он действительно может работать для моего вопроса, и я просто использую псевдо-Java для выражения своей идеи.Возможно ли реализовать эту функцию в JS?

Вот мой код: jsfiddle

Спасибо.

Answer 1

Вы должны проверить, нажата ваша кнопка или нет, прежде чем переключаться

$(document).click(function (e) {
    if (!$(e.target).is('.button13')) {
             if( $('.button13').hasClass("clicked"))
                    $('.button13').toggleClass("clicked");
    }
})