jQuery - 单击父元素(而不是父元素)时淡出?

发布于 2024-08-31 18:24:44 字数 1460 浏览 9 评论 0原文

我的页面上有以下代码,我想做的是,当用户在 #loginBox 外部单击时,我希望整个 #loginOverlay 淡出。但如果没有通过单击 #loginBox 触发淡出,我就无法实现这种效果...

它位于页面底部,并且我在页面上有一个触发淡入的链接。但现在淡出有点困难。

我尝试这样做:

$("#loginOverlay").click(function() { ...fadeout... });

但它给了我相同的结果。

那么有什么建议吗?提前致谢!

<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);
    });

});

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.

I tried doing this:

$("#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);
    });

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

七堇年 2024-09-07 18:24:44

您需要检查 e.target 以查看实际单击的元素:

$("#loginOverlay").click(function(e) {
    if (e.target === this)
        $("#loginOverlay").fadeOut(100);
});

You need to check e.target to see what element was actually clicked:

$("#loginOverlay").click(function(e) {
    if (e.target === this)
        $("#loginOverlay").fadeOut(100);
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文