jQuery - fadeOut div가 바깥 쪽을 클릭 한 후 페이드 인합니다.

Question

fadeIn/fadeOut에 문제가 있습니다. 내 타겟은 div를 페이드 인 버튼으로 클릭하고 div 외부를 클릭하면 해당 div가 FadeOut이됩니다. 그러나 문제는 모든 이벤트가 같은 시간에 발생하는 코드를 사용하는 경우 한 번의 클릭으로 FadeIn 및 FadeOut을 의미합니다. 그 div를 어떻게 할 수 있습니까?

<div class="col-xs-12 col-md-6 col-sm-6 portfolio_page__box" id="portfolio_page__item1"> 
    <div class="portfolio_page__button1" id="portfolio_page--item1_showup"> 
    <p>INFO</p> 
    </div> 
</div> 
<div id="portfolio_page__item1_showup_table"></div> 

JQuery와 :

$(function() { 
    $("#portfolio_page--item1_showup").click(function() { 
    $("#portfolio_page__item1_showup_table").fadeIn("slow"); 
    $(".portfolio_page__box").fadeOut("slow"); 
    }); 
}); 

$(document).click(function() {  
    if (this.id != 'portfolio_page__item1_showup_table') { 
    $("#portfolio_page__item1_showup_table").hide(); 
    }  
}); 

Answer 1

이 이벤트 전파 (버블) 함께 할 수있는 뭔가가있을 수 있습니다 - 당신은 그것에 대해 읽을 수 있습니다. HTML이 완전하지 않으므로 샘플 솔루션을 제공 할 수 없습니다.

기본 해결 방법은 변수를 사용하고 가시성 상태를 추적하는 것입니다. 내가 그렇게 할 수 _How

var viz = false; 
 
$(function() { 
 
    $("#portfolio_page--item1_showup").click(function() { 
 
    $("#portfolio_page__item1_showup_table").fadeIn("slow", function(){ 
 
     viz = true; 
 
    }); 
 
    $(".portfolio_page__box").fadeOut("slow"); 
 
    }); 
 
}); 
 

 
$(document).click(function() { 
 
    if (viz) { 
 
    $("#portfolio_page__item1_showup_table").hide(); 
 
    viz = false; 
 
    } 
 
});

.btn{padding:10px;border:1px solid orange;} 
 
#portfolio_page__item1_showup_table{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="col-xs-12 col-md-6 col-sm-6 portfolio_page__box" id="portfolio_page__item1"> 
 
    <div class="portfolio_page__button1 btn" id="portfolio_page--item1_showup"> 
 
    <p>INFO</p> 
 
    </div> 
 
</div> 
 
<div id="portfolio_page__item1_showup_table"> 
 
    <table> 
 
    <tr><td>Cell 1</td><td>Cell 2</td></tr> 
 
    <tr><td>Cell 3</td><td>Cell 4</td></tr> 
 
    </table> 
 
</div>