绑定两个选择器，一个用于 addClass，另一个用于 removeClass

Question

正如标题所说，如何绑定两个选择器来打开/关闭（添加和删除类）在div上？

简单的 HTML：

<div>
<a href="#" class="open">Open</a>
<div>
<span class="close">X</span>
</div>
</div>

一些jQuery：

$(function() {
  var $open = $("a.open");
  var $close = $("span.close");
  $open.on("click", function() {
    var $this = $(this);
    if ($this.hasClass("active")) {
      $this.removeClass("active");
      $this.parent("div").removeClass("is-open");
    } else {
      $this.addClass("active");
      $this.parent("div").addClass("is-open");
    }
  });
  $close.on("click", function() {
    // This and only this close should remove the active class from the div and remove the active class from "a".
  });
});

再一次;如果我单击"a"打开div，然后按"span"关闭div。哪种方法最好？

Answer 1

您可以使用，

  $close.on("click", function() {
    var container = $(this).parent().parent();
    container.find(".active").removeClass("active");
    container.removeClass("is-open");
  });

Answer 2

你可以这样做：

var $open = $("a.open");
var $close = $("span.close");
$open.on("click", function() {
  var $this = $(this);
  $this.addClass("active");
  $this.parent("div").addClass("is-open");
});
$close.on("click", function() {
  $(this).closest('.is-open').removeClass('is-open');
  $(this).parent().prev().removeClass('active');
});

.is-open {
  background: yellow;
  border: solid 1px black;
}
.active {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#" class="open">Open</a>
  <div>
    <span class="close">X</span>
  </div>
</div>