Question

I’m trying to create the illusion of a multiselect dropdown using a div that is toggled by pressing an empty dropdown. It works fine but I’d like to be able to hide it when clicking outside the div. How do I do this? I use the following code:

<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

onclick any where on the page hide the div and cancel click propagation to parent elements when click on 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);
     });

});

Edit:

Cancel event propagation when click on checkboxes