我错过了什么?简单的 HTML 和 jQuery

为什么这个简单的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>

问题似乎是jsFiddle在源代码中添加了一些不明显的字符。如果它们被删除，代码将起作用。请注意，jQuery不需要cancelBubleEv函数，为什么不使用最新版本。也没有</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>

相关内容

最新更新

热门标签：