当用户使用jQuery在其外部点击时隐藏DIV
我正在使用此代码:
$(document).ready(function(){
$(".SlideDiv").hide();
$(".Show_hide").show();
$('.Show_hide').click(function(){
$(".SlideDiv").slideToggle();
});
});
而这个HTML:
<a href="#" class="Show_hide">Show/hide</a>
<div class="SlideDiv">this is content page
<a class="agree" href="https://www.google.com/" target="_blank">google</a>
</div>
而这个CSS:
.SlideDiv
{
height:200px;
background-color:gray;
margin-top:10px;
}
.Show_hide
{
display:none;
}
问题是我有DIV内的链接,当他们点击链接打开但显示功能没有隐藏。
演示
DEMO
无需为此使用任何插件。 您只需将文档上的每一次点击都绑定到一个函数上,并检查点击是否在对象上不是任何功能链接。 event.stopPropagation()
用于防止事件冒泡。
$(document).ready(function(){
$(document).on('click',function(e){
if( !$(e.target).is('.Show_hide, .SlideDiv') ||
!$(e.target).parents('.Show_hide, .SlideDiv').length == 0){
$(".SlideDiv").slideUp();
e.stopPropagation();
}
});
$(".SlideDiv").hide();
$(".Show_hide").show();
$('.Show_hide').click(function(){
$(".SlideDiv").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a href="#" class="Show_hide">Show/hide</a>
<div class="SlideDiv">this is content page
<a class="agree" href="https://www.google.com/" target="_blank">google</a>
</div>
你可以用js“mousedownoutside.js”使用下面的代码来做到这一点
http://benalman.com/projects/jquery-outside-events-plugin/
$('yourDiv').on('mousedownoutside', function(event){
var target = $( event.target );
if($(this) != target){
$(this).slideUp();
}
});
链接地址: http://www.djcxy.com/p/83649.html
上一篇: Hide a DIV when the user clicks outside of it using jQuery
下一篇: hide div when clicking outside the container with jquery