麻煩在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單擊事件

回答

相關問題