Question

我正在使用jQuery函数

function ShowHide(){
  $(".login").animate({"height": "toggle"}, { duration: 1000 });
}

和显示隐藏.login div的链接是：

onclick="ShowHide(); return false;"

但是这个链接只是将div切换为显示和隐藏，但我希望它在用户点击div时也隐藏，我有一个页面包装器，但只需要一些jQuery帮助。

Answer 1

<html>
    <head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <style>
        .login-div { width: 100px; height: 100px; margin:auto; border: solid 1px black; position: relative; background-color: #aeaeae;  display:none;}
        .parent-div { width: 300px; height: 300px; margin:auto; border: solid 1px #aeaeae; position: relative;}
        .footer { margin-bottom: 0px; margin-top:auto; margin-left:auto; margin-right:auto; height:40px; width:200px; position:relative; display:none;}
    </style>
    <script>
        $(window).load(function(){
            var DEBUG = 0;
            var count = 0;
            $('.parent-div').bind('click', function(e){
                e.preventDefault();
                e.stopPropagation();
                DEBUG==1?console.log('Target: '+$(e.target).attr('class')):'';
                DEBUG==1?console.log('Show Hide: '+(count++)):'';
                //ShowHide();
                var target_class = $(e.target).attr('class');
                if(target_class == 'link'){
                    $(".login-div").animate({"height": "toggle"}, { duration: 1000 });
                    $('.footer').toggle();
                }
                else{
                    $(".login-div").animate({"height": "hide"}, { duration: 1000 });
                    $('.footer').hide();
                }
            });
        });
    </script>
    </head>
    <body>
        <div class="parent-div">Parent Box:<br/>
            <a href="#" class="link">ShowHide</a>
            <div class="login-div">Child Box:</div>
            <div class="footer">click out side the gray box & inside the Parent-box
        </div>
    </body>
</html>

根据我对您的要求的理解，我完成了上述操作，查看代码。这应该做你的工作。这里我在java脚本中使用“click”事件冒泡，并将事件监听器绑定到parent-div类元素。如果要增加元素的范围，这可以附加到<body/>。

Answer 2

如果您希望用户点击其他任何地方隐藏它，您需要将事件放在body元素上以隐藏它。

ps：请不要在html元素中使用onclick！ - 在jquery中使用事件管理器（例如，在addevent行中（点击，功能））

Answer 3

更容易

而不是建立一个特定的div来点击隐藏元素，你可以简单地建立所有不属于“show me”元素的元素，以便在点击时隐藏。

我的意思是，在您的javascript部分中，在您准备好的代码下面放置以下内容：

$("body *").not('.login, .login *').fadeOut(1000);
// This tells jquery to get all elements, in the body, not containing the
//     class login or any subelement of it 
// The fade out is just a simple jquery hide animation set to 1 second in this 
//     example but you can hide it however you want

并了解它是如何工作的。

在div外面点击调用jQuery show / hide函数

3 个答案: