Question

我是JavaScript和jQuery的初学者。

我的目标是使用jQuery中的slideToggle()函数隐藏/显示HTML中的<div>部分（受[问题]（How can I expand and collapse a <div> using javascript?）答案的启发。无法获取它虽然工作:(

以下是我的尝试：

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（即桌面）
<在同一个本地目录中/ LI>

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

我已经搜索并阅读了以下问题的答案：

Local jQuery.js file not working

Why jQuery does not work on my home (local) machine?

......但似乎还在做一些基本错误的事情。任何帮助将不胜感激！

Answer 1

首先，language="JavaScript"应为type="text/javascript"

其次，您需要将代码包装到$(document).ready(....)中 - 请注意，这比仅仅信任html的顺序更好，尽管您应该在{{1}的底部放置脚本}

请参阅下面的工作代码段

＆＃13;

body

＆＃13;

  .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;
            }

＆＃13;

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仍然不存在。

有几种方法可以解决这个问题。一个是将一切包装在一个只执行when the DOM is fully loaded的函数中，另一个是将脚本移动到页面的末尾，所以当div可用时执行它。

但我个人最喜欢的是using on to bind events。

旧：

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

新：

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

Answer 4

正如adeneo在评论中已经说过的那样，您的JavaScript在HTML中处于错误的位置。浏览器在看到代码后立即执行代码。现在在您的示例中，代码位于标题中，但您的代码尝试使用元素，稍后将在文件中定义该元素。当然这不起作用，因为在执行时元素不存在。有两种解决方案：

移动您的代码：您可以将JavaScript移动到HTML页面的末尾，就在结束</body>标记
使用$( document ).ready()：您可以为此函数提供一个函数，该函数将在文档准备就绪后立即调用，并且所有HTML元素都将被解析并可用于JavaScript。请参阅此示例，取自JQuery site
```
// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});
```

此外，language="JavaScript"标记的使用已过时，从未真正标准化。您应该使用type属性。请参阅this MDN entry。

无法让这个简单的脚本正确运行

4 个答案: