jquery Нажмите, чтобы закрыть текущий div, используя attr id

Question

У меня есть одна проблема с jquery secon Нажмите, чтобы закрыть открытый div.

Я создал этот DEMO от codepen.io

В этой демонстрации вы можете увидеть, есть две кнопки DIV с синим color.So до того щелкнул первую кнопку после того, как нажать вторую кнопку первого <div class="emoWrap" id="ac1"> не закрывается.

I судимого следующий 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 выключит при нажатии на другой. Это также означает, что он является расширяемым, просто измените значение 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 2

К сожалению, не испытывал. Хотя вам не нужны оба клика. Вы можете удалить из всех классов, а затем просто добавить тот, который вы хотите:

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

Answer 3

Просто добавьте немного логики к первой функции. Это не так, как я бы это сделать, но опираясь на свой код будет что-то вроде:

$(".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