jQuery单击事件中的问题答案

【问题标题】：trouble in jQuery click eventjQuery单击事件中的问题
【发布时间】：2013-03-15 05:50:47
【问题描述】：

我有以下 HTML 标记。

<div id="toppanel">
    <div id="panel" style="display: none;">
        <div class="content clearfix">
            <div class="clear"></div>
            //some ul li
            <div class="left">
                <img alt="" src="img/slide_logo.png">
                <h1>Welcome</h1>
                <p class="grey">You can put request for anything you want : cooking, driver for a day, programmer... The only limit is your imagination!</p>                    
            </div>
            <div class="left">
                <h1>Member Login</h1>
                <form accept-charset="utf-8" action="/users/login" method="post" id="HeaderUserLoginForm" novalidate="novalidate">
                    //form fields
                    <input type="submit" style="float:left;position: relative;top: 10px;" class="button blue" value="Sign In" name="submit">
                    <a href="#" class="lost-pwd">Lost your password?</a>
                </form>
            </div>

            <div class="left right">
                <form accept-charset="utf-8" action="/users/signup" method="post" id="HeaderUserSignupForm" novalidate="novalidate">
                    //form fields
                    <input type="submit" style="float:left;position: relative;top: 10px;" class="button blue" value="Sign Up" name="submit">                            
                </form>
            </div>
        </div>
    </div>
</div>

上面的 HTML 代码用于顶部固定登录和注册，即slideup 和 down 使用 toggle。

现在，当用户 click 在 DOCUMENT 的其他部分上时，我需要隐藏它，我用下面的代码做到了。

$(document).on('click',function(e)
{
    e.stopPropagation();
    $("div#panel").slideUp("slow");
});

但问题是，当我点击toppanel DOM 的任何部分时，它也会同时点击slideUp。

那么我该如何克服这个问题。我也尝试过:not()，但没有希望。

我的结局是。

$(document).on('click','#panel input[type!="submit"], #toppanel:not("div"), #toppanel:not("div ul"), #toppanel:not("div p")',function(e)
{
    e.stopPropagation();
    $("div#panel").slideUp("slow");
});

这仅适用于"#panel input[type!="submit"]"，不适用于其他。

非常感谢。

【问题讨论】：

标签： php jquery slidedown

【解决方案1】：

$(document).on('click',function(e)
{
     if(!$(e.target).is('#toppanel')){
       e.stopPropagation();
       $("div#panel").slideUp("slow");
    }

});

更新..（我认为这不是一个好方法..无论如何试一试）给所有元素一个要排除点击事件的类

<div class="exclude">
   <p class="exclude"></p>
    <span class="exclude">fooo</span>
    etc....

</div>



 $(document).on('click',function(e)
    {
         if(!$(e.target).is('.exclude')){
           e.stopPropagation();
           $("div#panel").slideUp("slow");
        }

    });

【讨论】：

感谢您的快速响应，但它不起作用...已经尝试过
因为我在顶部面板中有两个表单，所以当我点击 div p 或输入它的向上滑动时..
@DipeshParmar 很高兴我能帮上忙

【解决方案2】：

以及 ubercooluk thanx 的帮助，这就是我最终得到的结果和它的工作原理。

$(document).on('click',function(e)
{
    if($(e.target).parents('#toppanel').length == 0 )
    {
        e.stopPropagation();
        $("#toggle a.close").hide();
        $("#toggle a.open").show();
        $("div#panel").slideUp("slow");
    }
});

【讨论】：

【解决方案3】：

这可能会有所帮助：

$('#panel').children().on('click', function(e){
    e.stopPropagation();
});

【讨论】：