如何不失去事业部专注内部按钮被点击

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; 
});