jquery下拉菜單onclick

我想用jQuery做一個簡單的下拉菜單，但我似乎無法得到任何的JavaScript工作。我曾嘗試在外部調用它。我不確定問題是什麼，如果你看到問題，請告訴我。謝謝。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>

來源

2012-07-03 Eric Goncalves

發生了什麼或不期望發生什麼？ –

當我點擊鏈接下拉菜單應該出現。但沒有任何事情發生。 –

似乎可以在Chrome中使用。 http://jsfiddle.net/pE7RW/ – Nope

風格和腳本標籤應該在你的頭標籤內。（雖然有些人把所有的腳本就在結束標記之前）

而無需DOCTYPE奇怪的事情都可能發生。在打開html標記之前添加「<！doctype html >」。

來源

2012-07-03 16:11:20 Samuel

我加入了文檔類型，仍然沒有改變 –

嘗試超能魚=>http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

來源

2012-07-03 16:13:02 eos87

不知道爲什麼你在有一個雙斜槓：

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

來源

2012-07-03 16:26:18

，沒什麼 –

HTTP：//明確要求非加密傳輸，同時https：//開頭請求對方。 //對於當前連接是隱式的。請看這裏：//stackoverflow.com/questions/4659345/ ;-) – Alastair

我複製你的代碼第42行有一個非法字符，在第二個「}）;」之後。我刪除了這個，它工作。

來源

2015-01-03 18:25:36 user1796823

jquery下拉菜單onclick

回答

相關問題