Блог

Главная - Вопросы по программированию - Переключать класс при нажатии на сам элемент и удалять при нажатии снаружи

Переключать класс при нажатии на сам элемент и удалять при нажатии снаружи

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть список элементов dom:

  • Когда я нажимаю на элемент, он открывается и закрывается.
  • Когда я нажимаю на дочерний элемент открытого, он не закрывает родительский элемент.
  • Когда я нажимаю на другой, он откроет тот, на который нажат, и закроет остальные.
  • Когда я щелкаю за пределами открытого элемента, он закрывается, а затем открывается.

-> Проблема в том, что я не могу заархивировать первый. Кто-нибудь знает, что я здесь делаю не так? 

 $(".front").click(function() {
  $(".front").not(this).removeClass("active");
  $(this).addClass("active");
});
$(document).mouseup(function(n) {
  var t = [];
  t.push($(".front"));
  $.each(t, function(t, i) {
    $(i).is(n.target) || $(i).has(n.target).length !== 0 || $(i).removeClass("active")
  })
});  
 .front {
  position: relative;
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 20px;
}

.front .back {
  position: absolute;
  top: 50%;
  left: 150px;
  display: none;
  background-color: green;
  width: 50px;
  height: 50px;
}

.front.active .back {
  display: block;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="front">
    <div class="back"></div>
</div>

<div class="front">
    <div class="back"></div>
</div>

<div class="front">
    <div class="back"></div>
</div>

Ответ №1:

просто добавьте класс переключения после вашей первой строки:

 $(".front").click(function() {
$(".front").not(this).removeClass("active");
$(this).toggleClass("active");

});

Комментарии:

1. если использовать toggleClass, дочерний элемент внутри тоже будет переключаться, я просто хочу, чтобы родительский был переключаемым

2. Затем добавьте .parent после (этого)

3. В моем случае это не работает, когда я нажимаю на дочерний элемент, он все равно переключается