jQuery - исчезают при нажатии на родительский элемент (а не на родительские элементы)? - PullRequest
Новая
       29

jQuery - исчезают при нажатии на родительский элемент (а не на родительские элементы)?

3 голосов
/ 04 мая 2010

У меня есть следующий код на моей странице, и я пытаюсь сделать следующее: когда пользователь нажимает за пределами #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);
    });

});

1 Ответ

6 голосов
/ 04 мая 2010

Вам нужно проверить e.target, чтобы увидеть, какой элемент был фактически нажат: 

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