jQuery - 点击父元素(而不是父母子项)时淡出? [英] jQuery - fade out when clicking on parent element (and not the parents children)?
问题描述
我在我的页面上有以下代码,我想做的是,当用户点击#loginBox之外,我想要整个#loginOverlay褪色。但我不能实现这种效果,没有通过点击#loginBox ...触发fadeout
I've got the following code on my page, and what i'm trying to do is that when a user clicks outside the #loginBox, i want the entire #loginOverlay to fadeout. But i can't achieve this effect without having the fadeout triggered by clicking on #loginBox...
它放置在页面的底部,我有一个链接在触发淡入淡出的页面上。
It's placed on the bottom of the page, and i have a link on the page that triggers the fadein. But the fadeout is a bit struggling now tbh.
我试过这样做:
$("#loginOverlay").click(function() { ...fadeout... });
但它给了我相同的结果。
but it gives me the same result.
那么任何建议?提前感谢!
So any suggestions? Thanks in advance!
<div id="loginOverlay">
<div id="loginBox">
<img class="closeBtn" src="images/icons/close.png" alt="" />
<h3>Login</h3>
<form action="login.php?ref=index.php" method="post">
<input type="text" name="username" value="Username..." onblur="if(this.value.length == 0) this.value='Username...';" onclick="if(this.value == 'Username...') this.value='';" />
<input type="password" name="password" value="Password..." onblur="if(this.value.length == 0) this.value='Password...';" onclick="if(this.value == 'Password...') this.value='';" />
<input class="loginBtn" type="submit" name="submit" value="Login!" />
</form>
</div> <!--login box -->
</div>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
$('#loginOverlay').css('display', 'none');
$('#loginToggle').click(function() {
$("#loginOverlay").fadeIn(200);
});
$("#loginBox").parent().click(function(){
$("#loginOverlay").fadeOut(100);
});
});
推荐答案
您需要检查 e .target
查看实际点击的元素:
You need to check e.target
to see what element was actually clicked:
$("#loginOverlay").click(function(e) {
if (e.target === this)
$("#loginOverlay").fadeOut(100);
});
这篇关于jQuery - 点击父元素(而不是父母子项)时淡出?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!