这很好用。但是现在我想添加功能,这样如果用户点击div之外的任何地方,div将返回隐藏状态。还有一个问题,我可以使用相同的代码IPade ......
如何通过单击外部隐藏或关闭div框?
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
$("#focus").click(function () {
$('#hidden-item').toggleClass('focused');
});
});//]]>
</script>
<style type="text/css">
#focus {float: left; background: #333; color: #fff; padding: 5px;}
#wrap {
width: 100%;
position: fixed;
}
#hidden-item {
background: red; color: #fff;
position: absolute;
top: 50px;
left: 100%;
width: 100%;
margin-left:15px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
#hidden-item.focused {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<div id="wrap">
<p id="focus">Click to Show/Hide</p>
<div id="hidden-item">
Hidden div...
<br />
<br /><br /><br /><br /><br />
Line2
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
尝试此选择器 $(“:not('#wrap')”)
$(":not('#wrap')").click(function(){
// hide your div here
});
答案 1 :(得分:0)
请参阅我的问题和明确的答案:
Close a customized box at ESC keypress with JQuery
我在Joffrey上发布了类似的答案(几乎没有修改)。相反,#modal-dialog
可以是您要关闭它的div的任何选择器。而不是在新版本的jquery中弃用的live
,而是使用on
。
$("html").on("keyup", function(e) {
if(e.keyCode === 27 && !($('#modal-dialog').hasClass("no-display")))
escape_check();
}
}
function escape_check() {
// here, reset any fields at closing box (if you have any)
$("#modal-dialog").removeClass("no-display");
$("#feedback-modal-dialog input").each(function() {
$('#modal-dialog').attr("value","");
});
$("#feedback-modal-dialog textarea").each(function() {
$('#modal-dialog').val("");
});
$("#modal-dialog").addClass("no-display"); //or .hide()
}
答案 2 :(得分:0)
您必须在切换课程中将left:0
更改为left:0px
。
结果使用您的代码:http://jsfiddle.net/G5Yh4/1
对于您的问题,请将JS更改为:
var hover_focus = false ;
$(document).ready(function () {
$("#focus").click(function () {
$('#hidden-item').toggleClass('focused');
})
.mouseover(function () {
hover_focus = true ;
})
.mouseout(function () {
hover_focus = false ;
});
});
$(document).click(function() {
if(!hover_focus) {
$('#hidden-item').removeClass('focused');
}
}) ;
我认为jQuery有一个“不悬停”的选择器,类似于.not(':hover')
。你可以在那里查看:http://api.jquery.com/not/
答案 3 :(得分:0)