Question

我有一个问题，jquery secon点击关闭打开的div。

我已从codepen.io

创建了 DEMO

在这个演示中你可以看到有两个蓝色按钮div。所以在点击第二个按钮之后点击第一个按钮之前，第一个<div class="emoWrap" id="ac1">没有关闭。

我尝试了以下js代码：

$(document).ready(function() {
   $("body").on("click", ".button", function(e) {
      e.stopPropagation();
      var ID  = $(this).attr("id");
      $("#ac" + ID).toggleClass("emoWrap-active");
      /*var $current = $(this).find('.emoWrap').toggleClass("emoWrap-active");
      $('.emoWrap').not($current).removeClass('emoWrap-active');*/
   });
   $("body").click(function(){
         $(".emoWrap").removeClass("emoWrap-active");
    });
});

HTML

<div class="container">
   <div class="button" id="1">1</div>
   <div class="emoWrap" id="ac1">
      <div class="Emojis">For 1</div>
   </div>
</div>
<div class="container">
   <div class="button" id="2">2</div>
   <div class="emoWrap" id="ac2">
      <div class="Emojis">For 2</div>
   </div>
</div>

Answer 1

只需为您的第一个功能添加更多逻辑。我不是这样做的，但建立你的代码将是这样的：

$(".button").on("click", function(e) {
  e.stopPropagation();
  var ID  = $(this).attr("id");

  if($("#ac" + ID).hasClass('emoWrap-active')) {
    $(".emoWrap").removeClass("emoWrap-active");
  } else {
    $(".emoWrap").removeClass("emoWrap-active");
    $("#ac" + ID).toggleClass("emoWrap-active");
  }
});

像这样：http://codepen.io/anon/pen/wMqZqY

Answer 2

尝试this codepen example，我对其进行了编辑，以便在点击其他emoWraps时关闭所有其他emoWraps。这也意味着它是可以扩展的，只需将IDAmount更改为您拥有的emoWraps数量。

这是经过编辑的JavaScript代码：

var IDAmount = 2;
$(document).ready(function() {
   $(".button").on("click", function(e) {
      e.stopPropagation();
      var ID  = $(this).attr("id");
      $("#ac" + ID).toggleClass("emoWrap-active");
      for(var i = IDAmount; i >= 1; i--){
         if(i != ID){
            $("#ac" + i).removeClass("emoWrap-active");
         }
      }
   });
});

Answer 3

抱歉，没有测试过。虽然您不需要两次点击。您可以从所有类中删除，然后只需添加您想要的类：

  e.stopPropagation();
  var ID  = $(this).attr("id");
  $(".emoWrap").removeClass("emoWrap-active"); // Add this
  $("#ac" + ID).addClass("emoWrap-active");

jquery单击以使用attr id关闭当前div

3 个答案: