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

Question

我有以下示例：

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 个框，默认情况下停用（隐藏），只有单击一次，才会显示内容。

我想做什么：当我再次点击该框时，它应该隐藏该框（显示：none）

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

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");
    }
  });
});

Answer 2

试试下面这个：

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

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

jQuery on click again, should hide the box (like toggle)

javascript

jquery

click