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

Question

我在使用 jquery secon click to close opened div 时遇到一个问题。

我创建了这个 DEMO 来自 codepen.io

在此演示中，您可以看到有两个蓝色按钮 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

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