我錯過了什麼？簡單的HTML和jQuery

爲什麼這個簡單的HTML文件不能正常工作？我錯過了什麼？我在另一個線索中得到了這個解決方案，但是我無法控制那個提供它的人。所有我所做的就是從這個複製他給我的部分：http://jsfiddle.net/UnQMU/我錯過了什麼？簡單的HTML和jQuery

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

來源

2012-06-20 vsdev

爲什麼你會選擇使用這樣一個老版本的jQuery？已經有版本1.7.2 .... – Lix

jQuery完成你的取消功能所做的一切。請致電stopPropagation。 – pimvdb

我該怎麼做？我是jQuery的新手。此外，由於沒有任何事件是第一個需要解決的問題，對嗎？代碼本身正在工作。 – vsdev

問題似乎是的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>

來源

2012-06-20 09:07:07 pimvdb

再次感謝！你一直很有幫助！ – vsdev

我錯過了什麼？簡單的HTML和jQuery

回答

相關問題