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

我是 JavaScript 和 jQuery 的初学者。

我的目标是使用 slideToggle() jQuery 中隐藏/显示的函数 <div> HTML 中的部分(灵感来自 [this question]( 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(即桌面)位于同一本地目录中

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?

...但似乎仍然在做一些基本的错误。任何帮助将不胜感激!

最佳答案

首先，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>

关于javascript - 无法让这个简单的脚本正确运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34751913/

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

上一篇：css - 通过单击数字更改 div 背景

下一篇：html - 仅使用 HTML 将图像与表格对齐