单击外部时隐藏 DIV
[英]Hide DIV when clicked outside
问题描述
我有一个动态生成的表单系统。
下面的代码是调用日历的按钮。
<input id="btn1_0" type="button" value="☵" class="rsform-calendar-box btnCal rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">
这是单击上述按钮时显示的 div。 在 div 内单击时，该按钮会切换样式display:none ：
<div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single">
Calendar Here
</div>
当有人在 div 之外点击时，我也想隐藏日历。
我试过这个 JS，但它不会工作，因为它将display:none设置为 div。 我做错了什么？
jQuery(document).click(function(event) {
if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
jQuery(".yui-calcontainer").hide();
}
});
5 个解决方案
解决方案1
2 2016-08-27 04:51:18
您不能将单击事件绑定到文档。 把它绑在身体上。
jQuery('body').click(function(event) {
if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
jQuery(".yui-calcontainer").hide();
}
});
or
jQuery(document).on('click', 'body', function(event) {
if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
jQuery(".yui-calcontainer").hide();
}
});
解决方案2
2 2016-08-27 05:18:34
你可以使用这样的一些技巧，检查下面的代码
$(document).dblclick(function (e) { var container = $(".yui-calcontainer"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.hide(); /// or container.toggle(); to show/hide } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body style="height:100% ; width:100%;";> <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> Calendar Here </div> </body>
使用container.toggle(); 显示/隐藏
如果这对您有帮助，请告诉我。
这是我的 HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).dblclick(function (e)
{
var container = $(".yui-calcontainer");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.toggle();
}
});
</script>
</head>
<body style="height:100% ; width:100%;";>
<div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single">
Calendar Here
</div>
</body>
</html>
解决方案3
0 2016-08-27 04:44:39
看起来您正在尝试使用 YUICalendar 库，在这种情况下，查看官方文档@ https://developer.yahoo.com/yui/calendar/可能会有所帮助
我找到了一个可以完成您想要实现的目标的示例： https : //developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html
解决方案4
0 2019-08-23 07:05:26
当您单击按钮时，您将看到 div，当您再次单击按钮时 div 关闭，当 div 打开时，您在 div 外单击 ...div 关闭...
$(document).ready(function(){
$('#privacy').toggle();
$('#privacybutton').click( function(e) {
// stops link from making page jump to the top
e.preventDefault();
// when you click the button, it stops the page from seeing it as clicking the body too
e.stopPropagation();
$('#privacy').toggle();
});
$('#privacy').click( function(e) {
// when you click within content area, it stops the page from seeing it as clicking the body too
e.stopPropagation();
});
$('body').click( function() {
$('#privacy').hide();
});
});
解决方案5
-1 2019-09-12 13:00:23
$("body").on('click', function (e) {
var ignoreContainer = $(".feeling_menu_trigger"); //you can add
//.feeling_menu_container class if you want to keep container on when user
//click inside of container e.g
$(".feeling_menu_trigger,.feeling_menu_container")
if (!(ignoreContainer.is(e.target) ||
ignoreContainer.has(e.target).length)) {
$(".feeling_menu_container").hide();
}
});
显示div onclick并在其外部单击时隐藏div并关闭按钮
[英]show a div onclick and Hide div when clicked outside of it and close button
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.