爲什麼我的JavaScript代碼不工作？

-3

$(function() { $('.toggler').click(function() { $(this).find('div').slideToggle(); }); });

<div class="toggler"> This is the title 
<div> This is the content to be toggled </div>

div.toggler { background:lightblue; cursor:pointer; } 
div.toggler div { display:none; }

，我試圖複製在自己的網站了，但它不工作。它顯示所有內容，但點擊時沒有任何反應。這是我的代碼。

div.toggler { background:lightblue; cursor:pointer; } 
 
div.toggler div { display:none; }

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <link href="design.css" rel="stylesheet" type="text/css" /> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t $(function() { 
 
    \t \t \t $('.toggler').click(function() { 
 
     \t \t \t \t $(this).find('div').slideToggle(); 
 
    \t \t \t \t }); 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="toggler"> This is the title 
 
    \t \t <div> This is the content to be toggled </div> 
 
\t \t </div> 
 
\t </body> 
 
</html>

注意：您還可以看到該代碼是指與的jsfiddle做鏈接。

來源

2015-08-19 David Loudon

看起來你忘了在'HTML'中包含'jQuery'庫存 –

如果你想讓它工作，你需要包含jQuery庫。

<head> 
    <link href="design.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('.toggler').click(function() { 
       $(this).find('div').slideToggle(); 
      }); 
     }); 
    </script> 
</head>

另外一個建議是，將您script標籤與您的代碼只是畢竟HTML之前body標籤的關閉，讓JS編譯不渲染的瀏覽器干擾。

來源

2015-08-19 01:10:40

當然，你應該使用外部JavaScript而不是將它放到你的HTML中，這樣它就會被緩存在客戶端瀏覽器中，以便加載時間更快再次訪問您的網站。 – PHPglue

你可以使用googleapis來緩存jquery。 https://developers.google.com/speed/libraries/ – Scramble

我添加了jQuery Library，並在兩個位置（頭部和身體的盡頭）嘗試了腳本，但它仍然不起作用？ –

爲什麼我的JavaScript代碼不工作？

回答

相關問題