0

この単純な HTML ドキュメントが正しく機能しないのはなぜですか? 私は何を逃したのですか？この解決策を別のスレッドで入手しましたが、それを提出した人を把握できません。私がやったのは、彼が私にくれた部分をコピーしただけです: http://jsfiddle.net/UnQMU/

<html>
<head>
    <title></title>

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

    <script type="text/javascript">

        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);
            });

        });​

    </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>

</head>
<body>

    <div style="position:relative;">
        <div ID="DropDownList1" runat="server" width="200" class="testColor">
            Choose Multiple
        </div>
        <div id="exampleDiv">
            <input type="checkbox" ID="CheckBox2"/>
            <br />
            <input type="checkbox" ID="CheckBox3"/>
            <br />
            <input type="checkbox" ID="CheckBox4"/>
            <br />
            <input type="checkbox" ID="CheckBox5"/>
            <br />
            <input type="checkbox" ID="CheckBox6" runat="server" />
            <br />
            <input type="checkbox" ID="CheckBox7"/>
            <br />
            <input type="checkbox" ID="CheckBox8"/>
            <br />
            <input type="checkbox" ID="CheckBox9"/>
            <br />
            <input type="checkbox" ID="CheckBox10"/>
            <br />
            <input type="checkbox" ID="CheckBox11"/>
            <br />
            <input type="checkbox" ID="CheckBox12"/>
            <br />
        </div>
    </div>​

</body>

4

1 に答える 1

3

問題は、jsFiddle が目立たない文字をソースに追加することだったようです。それらが削除された場合、コードは機能します。cancelBubleEvこの関数は jQuery では必要ないことに注意してください。最新バージョンを使用してください。どちらもありません</html>。

<html>
<head>
    <title></title>

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

    <script type="text/javascript">

        $(document).ready(function () {
            $(document).click(function () {
                $("#exampleDiv").hide();
            });

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

            $("#exampleDiv").click(function (e) {
                e.stopPropagation();
            });
        });
    </script>

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

</head>
<body>

    <div style="position:relative;">
        <div ID="DropDownList1" runat="server" width="200" class="testColor">
            Choose Multiple
        </div>
        <div id="exampleDiv">
            <input type="checkbox" ID="CheckBox2"/>
            <br />
            <input type="checkbox" ID="CheckBox3"/>
            <br />
            <input type="checkbox" ID="CheckBox4"/>
            <br />
            <input type="checkbox" ID="CheckBox5"/>
            <br />
            <input type="checkbox" ID="CheckBox6" runat="server" />
            <br />
            <input type="checkbox" ID="CheckBox7"/>
            <br />
            <input type="checkbox" ID="CheckBox8"/>
            <br />
            <input type="checkbox" ID="CheckBox9"/>
            <br />
            <input type="checkbox" ID="CheckBox10"/>
            <br />
            <input type="checkbox" ID="CheckBox11"/>
            <br />
            <input type="checkbox" ID="CheckBox12"/>
            <br />
        </div>
    </div>

</body>
</html>
于 2012-06-20T09:07:07.677 に答える