通過jQuery隱藏div上的模糊

我正嘗試使用通過按下空白下拉菜單來切換的div來創建多選下拉的錯覺。它工作正常，但我希望能夠在div外部單擊時隱藏它。我該怎麼做呢？我使用下面的代碼：通過jQuery隱藏div上的模糊

<script src="../js/jqGlobal.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".testColor").click(function() { 
      $("#exampleDiv").toggle(); 
     }); 
     $("#exampleDiv").blur(function() { 
      $("#exampleDiv").toggle(); 
     }); 
    }); 
</script> 

<style type="text/css"> 
    #exampleDiv 
    { 
     position: absolute; 
     top:22px; 
     left: 0px; 
     width:198px; 
     height:150px; 
     overflow-y: scroll; 
     overflow-x: hidden; 
     border: 1px solid #7F9DB9; 
     display: none; 
    } 

</style> 

    <div style="position:relative;"> 
     <asp:DropDownList ID="DropDownList1" runat="server" Width="200" class="testColor"> 

     </asp:DropDownList> 
     <div id="exampleDiv"> 
      <asp:CheckBox ID="CheckBox2" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox3" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox4" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox5" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox6" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox7" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox8" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox9" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox10" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox11" runat="server" /> 
      <br /> 
      <asp:CheckBox ID="CheckBox12" runat="server" /> 
      <br /> 
     </div> 
    </div>

來源

2012-06-18 vsdev

爲jquery點擊外部和其他有趣的事件：http://benalman.com/projects/jquery-outside-events-plugin/ – biziclop

的onclick頁面上的任何地方隱藏div和取消點擊傳播到父元素時在testColor點擊

function cancelBubleEv(e) 
{ 
    e = e||event; 
    e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; 

} 

$(document).ready(function() { 
    $(document).click(function() { 

     $("#exampleDiv").hide(); 

    }); 
    $(".testColor").click(function (e) { 
     $("#exampleDiv").toggle(); 
     cancelBubleEv(e); 
    }); 
    $("#exampleDiv").click(function (e) { 
     cancelBubleEv(e); 
    }); 

});

編輯：

取消事件傳播當點擊checkboxe s

來源

2012-06-18 14:21:04 Arif

當我按下複選框時，該代碼隱藏它。它是可調整的嗎？ – vsdev

對不起，我只是忘了你可以取消複選框上的泡泡事件。我編輯了代碼。 – Arif

仍是同樣的問題。 – vsdev

你可以嘗試.mouseout（）而不是.blur（）

來源

2012-06-18 14:10:04 TheAmazingJason

鼠標移出鼠標懸停在鼠標上方的。 – vsdev

var element = $("#exampleDiv");  

$(document).bind('mouseup', function (e){ 
    if (element.has(e.target).length === 0) 
     $(element).hide(); 
}); 

$(element).click(function(){ 
    $(element).show(); 
})

來源

2012-06-18 14:14:00

該代碼似乎有問題。它是否缺少a）？抱歉，不得不問，但我用jQuery不太好。 – vsdev

對不起，請再試一次 –

嘿，現在我們正在接近！它的工作方式我現在喜歡它，除了點擊div的主體，即缺少複選框時，div消失。是否有可能從#exampleDiv中刪除該事件？ – vsdev

通過jQuery隱藏div上的模糊

回答

相關問題