jquery - 通过 jQuery 隐藏模糊的 div

Question

我试图使用一个 div 来创建多选下拉列表的错觉，该 div 通过按空下拉列表进行切换。它工作正常，但我希望能够在单击 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>

Answer 1

var element = $("#exampleDiv");    

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

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