通过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上的模糊

回答

相关问题