如何收jQuery中

我的div面板當我將擴大股利之外點擊這個div應該被關閉。如何收jQuery中

我有一個像

<div id="panel"> 
<div>   
     <h1>Welcome to jquery demo</h1> 
       <h3>Welcome to jquery demo</h3> 
       <h3>Welcome to jquery demo</h3> 
       <h3>Welcome to jquery demo</h3> 
       <h3>Welcome to jquery demo</h3> 
      </div> 
</div> 
<div class="tab"> 
      <ul class="loginleft"> 
      <button class="sc-button g-opacity-transition sc-button-large loginButton" tabindex="0">Log in</button> 

     </ul> 
     <ul class="login"> 
      <li class="left">&nbsp;</li> 
      <li>Hello Guest!</li> 
      <li class="sep">|</li> 
      <li id="toggle"> 
       <a id="open" class="open" href="#">More Info</a> 
       <a id="close" style="display: none;" class="close" href="#">Close Panel</a>   
      </li> 
      <li class="right">&nbsp;</li> 
     </ul> 
    </div>

js代碼的html代碼

$(document).ready(function() { 

    // Expand Panel 
    $("#open").click(function(){ 
     $("div#panel").slideDown("slow"); 

    }); 

    // Collapse Panel 
    $("#close").click(function(){ 
     $("div#panel").slideUp("slow"); 
    });  


    // Switch buttons from "Log In | Register" to "Close Panel" on click 
    $("#toggle a").click(function() { 
     $("#toggle a").toggle(); 
    });  

});

我怎麼能還近，擴大DIV當我點擊以外的區域也。

來源

2013-10-07 Neo

panel div HTML在哪裏？ –

您可以將處理程序添加到該文件，因爲click事件是不是「氾濫」一...

=>測試event.target是否是 '.close'

$(document).on('click','.close', function(eventObject){ 
    $('#panel').slideUp("slow"); // useful if you want to put several buttons all over the your content 
});

=>或者乾脆就是你的面板外event.target

Jsfiddle here

（儘量不要過多的貪婪處理程序附加到文件，讓您的瀏覽器快速反應。）

來源

2013-10-07 08:30:11 Stphane

您可以使用focusout()

$("div#panel").focusout(function(){ 
     $(this).slideUp("slow"); 
    });

綁定的事件處理程序「事件的內容」 JavaScript事件。

See fiddle here

來源

2013-10-07 08:26:13

如何在文檔級別處理事件：

$(document).click(function(e){ 
    if (event.target.id == "open") { 
     $("div#panel").slideDown("slow"); 
    } 
    else if (event.target.id == "close") { 
     $("div#panel").slideUp("slow"); 
    } 
    else { 
     $("div#panel").slideUp("slow"); 
    } 
});

工作小提琴：http://jsfiddle.net/VC9eT/

來源

2013-10-07 08:43:43 juju

如何收jQuery中

回答

相關問題