2012-07-03 7 views
0

jquery로 간단한 드롭 다운 메뉴를 만들려고 노력하고 있습니다. 그러나 어떤 자바 스크립트도 작동하지 않는 것 같습니다. 나는 그것을 외부 적으로 시도했다. 문제가 무엇인지 모릅니다. 문제가 있으면 알려주세요. 감사.Jquery 드롭 다운 메뉴 onclick

<html> 
    <head> 
     <title></title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 

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

    <style type="text/css"> 
    #container{width:978px;} 
    .content { 
     display: none; 
     padding-left: 5px; 
     left: 0px; 
     width: 100%; 
     top: 30px; 
     background: yellow; 
    } 
    ul{width: 100%;} 
    li{ 
     float: left; 
     padding: 5px; 
     background: #e5e5e5;} 

    #div{ 
     background: #9e9e9e; 
     height: 20px; 
     width: 978px; 
    } 
    br{ 
     clear: left; 
    }​ 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
     $('.action').click(function() {   
      var name = $(this).attr("name"); 
      var content = $('.content[name=' + name + ']'); 
      $('.content').not(content).hide('fast'); 
      content.slideToggle('fast'); 
     }); 
    });​ 

    </script> 
    </head> 
    <body> 

    <div id="container"><ul> 
     <li> 
      <a href="#" class="action" name="summer">summer</a> 
     </li> 
     <li> 
      <a href="#" class="action" name="winter">winter</a> 
     </li> 
     <li> 
      <a href="#" class="action" name="weather">weather</a> 
     </li> 
     </ul></div><br> 
     <div class="content" name="summer"> 
      <a href="link">june</a> 
      <a href="link">july</a> 
     </div> 
     <div class="content" name="winter"> 
       <a href="link">november</a> 
       <a href="link">december</a> 
      </div> 
     <div class="content" name="weather"> 
       <a href="link">rain</a> 
       <a href="link">sun</a> 
     </div> 

     <div id="div"></div>​ 


    </body> 
    </html> 
+0

무슨 일이 일어나고 있거나 일어나고 있다고 생각하지 않습니까? –

+0

링크를 클릭하면 드롭 다운 메뉴가 나타납니다. 그러나 아무 일도 일어나지 않고 있습니다. –

+1

Chrome에서 작동하는 것으로 보입니다. http://jsfiddle.net/pE7RW/ – Nope

답변

0

스타일 및 스크립트 태그는 head 태그 안에 있어야합니다. (어떤 사람들은 닫는 body 태그 바로 전에 모든 스크립트를 넣었지만)

이상한 일이 발생할 수 있습니다. 오프닝 HTML 태그 앞에 "<! doctype html >"을 추가하십시오.

+0

doctype을 추가 했는데도 아무 것도 변경되지 않았습니다. –

0

확실하지 :

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

당신은 의미하지 않는 한 같은 것을 : 나는 당신의 코드를 복사

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

이 변경되었습니다. –

+0

http : //는 명시 적으로 암호화되지 않은 전송을 요청하지만 https : //는 반대를 요청합니다. // 현재 연결이 무엇이든지간에 암시 적입니다. 참조 : //stackoverflow.com/questions/4659345/ ;-) – Alastair

0

42 번째 줄에는 두 번째 "}); 이후 불법 문자가 있습니다."). 내가 이것을 지웠고 효과가있다.