4

空のドロップダウンを押すことで切り替えられる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>
4

3 に答える 3

1 
var element = $("#exampleDiv");    

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

$(element).click(function(){
    $(element).show();
})
于 2012-06-18T14:14:00.130 に答える
0

.blur() の代わりに .mouseout() を試すことができます

于 2012-06-18T14:10:04.783 に答える
0

ページ上の任意の場所で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);
     });

});

編集：

チェックボックスをクリックしたときにイベントの伝播をキャンセルする

于 2012-06-18T14:21:04.413 に答える