내가 무엇을 놓쳤는가? 간단한 HTML과 jQuery

왜이 간단한 HTML 문서가 제대로 작동하지 않습니까? 나는 무엇을 놓쳤는가? 다른 스레드에서이 솔루션을 얻었지만 제출 한 사람을 확보 할 수 없습니다. 모든 나는이에서 그가 내게 준 부분을 복사 한 적이 : 문제는 jsFiddle 소스에 몇 가지 눈에 띄지 문자를 추가하는 것 같았다 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

. 코드가 제거되면 코드가 작동합니다. 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-20 09:07:07 pimvdb

다시 한번 감사드립니다! 너는 큰 도움이되었다! – vsdev

내가 무엇을 놓쳤는가? 간단한 HTML과 jQuery

답변

관련 문제