javascript - 单击元素本身时切换类，单击外部时删除

Question

我有一个 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>

标签： javascriptjquery

Answer 1

只需在第一行之后添加切换类：

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

});