javascript - 再次点击 jQuery，应该隐藏该框（如切换）

Question

我有以下示例：

https://codepen.io/baidoc/pen/LYVvOZq

jQuery(function ($) {
  $(".box").click(function() {
    $(".box").removeClass("active");
    $(this).addClass("active");
    $(".boxContent").removeClass("show-content");
    var target = $(this).attr("target");
    $(".boxContent_" + target).addClass("show-content");
  });
});

2 个框，默认禁用（隐藏），只有单击一次，才会显示内容。

我正在尝试做的事情：当我再次单击该框时，它应该隐藏该框（显示：无）

我已经尝试过切换功能，但不知何故它似乎不起作用。我有什么选择？

标签： javascriptjqueryclick

Answer 1

那这个呢？

jQuery(function ($) {
  $(".box").click(function() {
    var currentActive = $(this).hasClass("active");
    $(".boxContent").removeClass("show-content");
    $(".box").removeClass("active");
    if (!currentActive){
      $(this).addClass("active");
      var target = $(this).attr("target");
      $(".boxContent_" + target).addClass("show-content");
    }
  });
});