麻烦在jQuery单击事件

我有以下HTML标记。麻烦在jQuery单击事件

<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="https://stackoverflow.com/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="https://stackoverflow.com/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"]"不是其他。

非常感谢。

来源

2013-03-15 Dipesh Parmar

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

});

更新。（不TA好办法我think..anyway给一试）把所有的元素，你要排除的单击事件

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

    });

来源

2013-03-15 05:53:50 coolguy

感谢快速反应，但它不工作...尝试它已经 – 2013-03-15 05:56:48

因为我有顶部面板内的两个表格，以便当我点击的div p或输入其滑动.. – 2013-03-15 05:58:06

Thanx帮助我解决了它... – 2013-03-15 06:04:24

嘛ubercooluk感谢名单一类帮助这是我最终和它的工作。

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

来源

2013-03-15 06:02:01

可能，这可能帮助：

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

来源

2013-03-15 06:03:44 Jai

麻烦在jQuery单击事件

回答

相关问题