单击第二次单击后删除添加的类

Question

第二次单击后如何删除priSCW-active 。

代码需要工作，但是当我第二次在container上单击时，它没有关闭。

我在这里想念的是谁能在这方面帮助我？

演示

$(document).ready(function() {
   $("body").on("click", ".container", function(event) {
      event.stopPropagation();
      var ID = $(this).attr("id");
      $(".priSCWrap").removeClass("priSCW-active");
      $("#open" + ID).toggleClass("priSCW-active").siblings().removeClass('priSCW-active');;
   });
   $("body").click(function(){
         $(".priSCWrap").removeClass("priSCW-active");
    });
});

Answer 1

$(document).ready(function() {
   var clicked = 0;
   $("body").on("click", ".container", function(event) {
      if (++clicked === 2) {
          // your code
      }
      event.stopPropagation();
      var ID = $(this).attr("id");
      $(".priSCWrap").removeClass("priSCW-active");
      $("#open" + ID).toggleClass("priSCW-active").siblings().removeClass('priSCW-active');
   });
   $("body").click(function(){
         $(".priSCWrap").removeClass("priSCW-active");
    });
});

Answer 2

如果删除removeClass()调用，则切换将实现您所需的功能。 此刻，您删除该类，然后切换将始终立即再次将其重新添加。 还要注意， .priSCWrap元素不是兄弟姐妹，因此siblings()不会选择任何内容。 您需要再次查询这些元素，并从匹配集中删除当前元素，以删除任何现有的priSCWrap-active类。 尝试这个：

$("body").on("click", ".container", function(event) {
    event.stopPropagation();
    var $current = $(this).find('.priSCWrap').toggleClass("priSCW-active");
    $('.priSCWrap').not($current).removeClass('priSCW-active');
});

小提琴的例子

还要注意，使用this和find()不需要将id选择器结合在一起。

Answer 3

您必须删除此行

$(".priSCWrap").removeClass("priSCW-active");