如何不失去事業部專注內部按鈕被點擊

Question

下面是我的HTML和JS代碼，我要當write_post_text（ID）獲得焦點然後write_post_upload（ID）的div應顯示當時write_post_container（ID）的div失去foucus然後它應該得到隱藏，實際上它工作正常，但問題是。當用戶點擊upload_post_img（ID）按鈕，然後它失去焦點和write_post_upload了隱藏與效果基本show功能，但是當。我想繼續單擊此按鈕，即使焦點。

<div class="upload_post" id="write_post_container" tabindex='-1'>   
<form method="post"> 
<div class="upload_div"> 
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea> 
</div> 
<div class="upload" id="write_post_upload"> 
<input type="hidden" name="post_img"> 
<ul> 
    <li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li> 
</ul> 
    <input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" /> 

<div class="post"> 
<button>Post</button> 
</div> 
</div> 
</form> 

這裏是我的JS代碼：

<script type="text/javascript"> 
$("#write_post_text").focusin(function() { 
    $("#write_post_upload").slideDown(); 
    }); 
$("#write_post_container, #write_post_container *").blur(function(e){ 
    if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){ 
$("#write_post_upload").slideUp(); 
    } 
}); 
$("#upload_post_img").click(function() { 
     $("#bTimelineFile").focus().trigger('click'); 
     $("#write_post_upload").show(); 
}); 
</script> 

Answer 1

您可以創建一個變量，改變它，只要選擇文件點擊

這樣

不要忘了復位它

$("#write_post_text").focusin(function() { 
    $("#write_post_upload").slideDown(); 
    }); 

    var blur = false; 
$("#write_post_container, #write_post_container *").blur(function(e){ 
    if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){ 
    if(!blur){ 
       $("#write_post_upload").slideUp();  
    } 

    } 
}); 
$("#upload_post_img").click(function() { 
     $("#bTimelineFile").focus().trigger('click'); 
     $("#write_post_upload").show(); 
}); 


$("#bTimelineFile").click(function() { 
    blur = true; 
});