Question

我一直在尝试实现我在JS Fiddle上发现的这个很酷的小Expand/Collapse js function，但是无法在浏览器测试中使用它。有人可以就需要纠正的问题提出建议吗？

可能应该知道这一点，但由于我是Javascript的新手，我被困住了。谢谢你的时间。

以下是我目前正在设置的所有代码：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="css/teststyle.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="expandcollapse.js"></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>

CSS

@charset "utf-8";
/* CSS Document */

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

JS

// JavaScript Document

$(document.ready()());
    $(".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";
        });
    });

});

Answer 1

您创建“document.ready”功能的方式不正确。

您可以使用正确的方法：

$(document).ready(function() {
     // here goes your code
});

或者很简单（比如下面的例子）：

$(function() {
    // here goes your code
});

尝试将您的Javascript文件更改为：

$(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";
            });
        });
    });
});

Answer 2

您的文档已准备就绪，无法正确调用/嵌套。请尝试以下方法：

$(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";
        });
    });

  });
});

Answer 3

这是你的js调用$（document）.ready。将您的代码更改为：

$(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";
            });
        }); rantFormViewModel.wireEvents();
    });
});

一切都会像你想要的那样发挥作用。

来自JS Fiddle的JS没有在浏览器测试中工作

3 个答案: