無法使此簡單腳本正常運行

Question

我是JavaScript和jQuery的初學者。

我的目標是使用jQuery中的slideToggle()函數隱藏/顯示HTML中的<div>部分（受[此問題]的答案啟發（如何使用JavaScript展開和折疊<div>？）。無法獲取它可以工作:(

這是我嘗試過的：

1個test.html（在我的桌面目錄中）

<html>
    <title>Test jQuery</title>
    <head>
        <script charset="UTF-8" src="jquery.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>

        <script language="JavaScript">
        $(".header").click(function() {

            $header = $(this);
            //getting the next element
            $content = $header.next();
            //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
            $content.slideToggle(500, function() {
                //execute this after slideToggle is done
                //change text of header based on visibility of content div
                $header.text(function() {
                    //change text based on condition
                    return $content.is(":visible") ? "Collapse" : "Expand";
                });
            });
        });
        </script>
    </head>

    <body>
        <div class="container">
            <div class="header">
            <span>Expand</span>
            </div>

            <div class="content">
                <ul>    
                    <li>This is just some random content.</li>
                    <li>This is just some random content.</li>
                    <li>This is just some random content.</li>
                    <li>This is just some random content.</li>
                </ul>
            </div>
        </div>
    </body>
</html>

我已經下載了jquery-1.12.0.min.js，將其重命名為jquery.js，並且它與test.html在同一本地目錄中（即桌面）。

style.css（在桌面上）

 .container { width: 100%; border: 1px solid #d3d3d3; } .container div { width: 100%; } .container .header { background-color: #d3d3d3; padding: 2px; cursor: pointer; font-weight: bold; } .container .content { display: none; padding: 5px; }

我已經搜索並閱讀了以下問題的答案：

本地jQuery.js文件不起作用

為什么jQuery在我的家用（本地）計算機上不起作用？

...但是似乎仍然在做一些基本的錯誤。 任何幫助將非常感激！

Answer 1

首先， language="JavaScript"應為type="text/javascript"

其次，您需要將代碼包裝到$(document).ready(....) -請注意，盡管您應該將腳本放在底部，但這比僅依賴html的順序更好。 body

參見下面的工作片段

  .container { width:100%; border:1px solid #d3d3d3; } .container div { width:100%; } .container .header { background-color:#d3d3d3; padding: 2px; cursor: pointer; font-weight: bold; } .container .content { display: none; padding : 5px; }

 <html> <title>Test jQuery</title> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" /> </head> <body> <div class="container"> <div class="header"> <span>Expand</span> </div> <div class="content"> <ul> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> </ul> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".header").click(function() { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(500, function() { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function() { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); }); }); </script> </body> </html>

Answer 2

這是因為script是在元素加載之前運行的，因此沒有任何元素可操作。 只需將腳本移動到內容下，或添加$('document').ready() 。 $('document').ready() ：

 div.content { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <title>Test jQuery</title> <head> <link rel="stylesheet" type="text/css" href="style.css"/> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/> <script language="JavaScript"> $('document').ready(function() { $(".header").click(function() { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(500, function() { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function() { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); }); }); </script> </head> <body> <div class="container"> <div class="header"> <span>Expand</span> </div> <div class="content"> <ul> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> </ul> </div> </div> </body> </html>

移動腳本：

 div.content { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <title>Test jQuery</title> <head> <link rel="stylesheet" type="text/css" href="style.css"/> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/> </head> <body> <div class="container"> <div class="header"> <span>Expand</span> </div> <div class="content"> <ul> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> <li>This is just some random content.</li> </ul> </div> </div> <script language="JavaScript"> $(".header").click(function() { $header = $(this); //getting the next element $content = $header.next(); //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. $content.slideToggle(500, function() { //execute this after slideToggle is done //change text of header based on visibility of content div $header.text(function() { //change text based on condition return $content.is(":visible") ? "Collapse" : "Expand"; }); }); }); </script> </body> </html>

Answer 3

$(".header").click(function() ..失敗，因為執行腳本時尚不存在帶有“ header”類的div。

有幾種解決方法。 一種是將所有內容包裝在僅當DOM完全加載時才執行的函數中，另一種是將腳本移至頁面末尾，因此在div可用時執行。

但是我個人最喜歡的是使用on綁定事件。

舊：

$(".header").click(function() {

新：

$(document).on("click", ".header", function() {

Answer 4

正如adeneo在他的評論中已經指出的那樣，您的JavaScript在HTML中的位置錯誤。 瀏覽器在看到代碼后立即執行。 現在在您的示例中，代碼位於標頭中，但是您的代碼嘗試使用元素，該元素將在文件的后面定義。 當然，這是行不通的，因為在執行時該元素不存在。 有兩種解決方案：

移動代碼：您可以將JavaScript移動到HTML頁面的末尾，即</body>標記的上方
使用$( document ).ready() ：您可以為該函數提供一個函數，該函數將在文檔准備好並且所有HTML元素被解析並可用於JavaScript后立即調用。 請參閱此示例，取自JQuery站點
```
 // A $( document ).ready() block. $( document ).ready(function() { console.log( "ready!" ); }); 
```

另外， language="JavaScript"標記的使用已過時，而且從未真正標准化。 您應該使用type屬性。 請參閱此MDN條目。

無法使此簡單腳本正常運行

問題描述

4 個解決方案

解決方案1
1 已采納 2016-01-12 19:19:20

解決方案2
0 2016-01-12 19:18:23

解決方案3
0 2016-01-12 19:19:00

解決方案4
0 2016-01-12 19:43:02

無法使此簡單腳本正常運行

問題描述

4 個解決方案

解決方案1 1 已采納 2016-01-12 19:19:20

解決方案2 0 2016-01-12 19:18:23

解決方案3 0 2016-01-12 19:19:00

解決方案4 0 2016-01-12 19:43:02

解決方案1
1 已采納 2016-01-12 19:19:20

解決方案2
0 2016-01-12 19:18:23

解決方案3
0 2016-01-12 19:19:00

解決方案4
0 2016-01-12 19:43:02