toggleClass onClick - 一次一个div

Question

我正在学习并需要一些帮助。我有两个隐藏的框，在按钮点击时可见。但是，我想要的只是其中一个一次开放。

因此，如果 Box 1 已打开

点击按钮打开方框2 = 方框1关闭和方框2打开

$("button").on("click", function(e) {
  e.preventDefault();
  $(this).siblings(".box").toggleClass("active");
});

.box {
  width: 200px; height: 50px; background: red;
  display: none;
}

.box.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col">
  <button class="toggle-good">Show the box</button>
  <p class="box good"></p>
</div>
<div>Push me</div>

<div class="col">
  <button class="toggle-good">Show the box</button>
  <p class="box good"></p>
</div>
<div>Push me</div>

Answer 1

引入一个新的currentBox变量并将其设置为（惊讶！）当前框，然后$(".box.active").not(currentBox).removeClass("active");将删除该类并隐藏除该那个之外的所有框。所以：

$("button").on("click", function(e) {
  e.preventDefault();
  var currentBox = $(this).siblings(".box").toggleClass("active");
  $(".box.active").not(currentBox).removeClass("active");
});

.box {
  width: 200px; height: 50px; background: red;
  display: none;
}

.box.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col">
  <button class="toggle-good">Show the box</button>
  <p class="box good"></p>
</div>
<div>Push me</div>

<div class="col">
  <button class="toggle-good">Show the box</button>
  <p class="box good"></p>
</div>
<div>Push me</div>

Answer 2

您可以从所有同级中删除活动类，并将float类切换到当前按钮。

active