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 在源代码中添加了一些不明显的字符。如果它们被删除，则代码有效。请注意，cancelBubleEvjQuery 不需要该功能，为什么不使用最新版本。也没有</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 回答