我有问题隐藏某些基于div的弹出窗口.当我点击那些他们不隐藏的div.这是我正在做的示例代码..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#MainCanvas div").blur(function()
{
alert("blured");
});
});
</script>
</head>
<body>
<div id="MainCanvas" style="width: 400px; height: 350px; border: solid 1px black;">
<div class="ui-widget-content" style=" vertical-align:middle; height:60px; border: solid 2px black; width:300px;">
Drag me around
</div>
</div>
</body>
</html>
我有一个jQuery函数,当单击一个元素时,隐藏的div显示.
$('.openHide').click(function(){
$(this).next('.hiddenContent').toggle();
});
我需要修改它,我可以关闭这个div,如果我不仅仅点击第一个元素.可能在模糊,但我不知道如何表明元素......
$('.hiddenContent').blur(function() {
$('.hiddenContent').parent().children('.hiddenContent').hide();
});
这是我的HTML:
<span class="openHide">text here</span>
<div style="display:none" class="hiddenContent">
hidden content here
</div>
基本上我正在尝试实现一个登录,例如新推特的登录.当您单击登录时,会弹出包含字段的div.现在,当我点击div之外的任何地方(div失去焦点)时,div应该消失.
我已经尝试过如何模糊div元素中提到的技术？
代码如下
$("body").click(function(evt) {
if (evt.target.id !== 'loginDialog') {
$("#loginDialog").hide();
}
});
麻烦就是target.id不会等于loginDialog,即使我点击某个地方有一个loginDialog在一个子div中说.
所以上面是一个很好的方向,但解决方案是不完整的.
实现这一目标的最佳方法是什么？
如果它们单击元素区域之外，我希望<div>with 类.shell-pop被关闭。但它似乎没有触发，也没有任何日志或警报发出。我环顾四周，一切看起来都对吗？
jQuery
$('document').ready(function () {
updateCart();
$(".shell").click(function (e) {
e.preventDefault();
$(".shell-pop").fadeIn(300, function () { $(this).focus(); });
});
$(".shell-pop").on('blur', function () {
$(this).fadeOut(300);
window.alert("work");
console.log("works");
});
});
HTML
<div class="options-area">
<div class="options-popup shell-pop">
<div class="swatches">
<div class="colors-shell colors" id="green">
<p class="prices-for-swatch">$14.23</p>
</div>
<div class="colors-shell colors" id="pink">
<p class="prices-for-swatch">$7.23</p>
</div>
<div class="colors-shell colors" id="blue">
<p class="prices-for-swatch">$11.25</p>
</div>
<div class="colors-shell colors" id="orange">
<p class="prices-for-swatch">$10.23</p>
</div>
<div class="colors-shell colors" id="default-shell">
<p class="prices-for-swatch">FREE</p>
</div>
<div class="colors-shell colors" id="exit">
<img src="img/Silhouette-x.png" …