JQuery和展开/折叠功能[重复]答案

【问题标题】：JQuery and expand/collapse function [duplicate]JQuery和展开/折叠功能[重复]
【发布时间】：2017-06-26 20:39:16
【问题描述】：

我编写了这个非常简单的代码来在按下按钮时展开和折叠文本，但它不起作用。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.expand').click(function(){
    $('.content').slideToggle('slow');
});
</script>
</head>
<body>
<div class="sitesection">
    <p class="expand"><a href="#">Click Here To Display The Content</a></p>
    <p class="content">Hello World!"</p>
</div>
</body>
</html>

当我点击“点击这里显示内容”时，什么也没有发生。

【问题讨论】：

因为你在一个元素存在之前就绑定了一个事件。
最后定义或者使用$(document).load(....方法
我可以关注<details><summary>Click here to display the content</summary><p>Hello world!</p></details>吗？

标签： javascript jquery

【解决方案1】：

将您的代码放在底部或使用 DOM 就绪事件

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<div class="sitesection">
    <p class="expand"><a href="#">Click Here To Display The Content</a></p>
    <p class="content">Hello World!"</p>
</div>
<script>
$('.expand').click(function(){
    $('.content').slideToggle('slow');
});
</script>
</body>
</html>

【讨论】：

感谢它有效！你能解释一下（或给我一个解释）为什么脚本应该放在身体的底部而不是头部吗？
@alessandro 当脚本执行元素必须在 DOM 中时learn.jquery.com/using-jquery-core/document-ready
@Alessandro 如果您在创建 dom 元素之前执行此操作，则单击事件不会绑定到任何内容。如果您将 .click 放在末尾，则 dom 已准备就绪，或者您在脚本 document.ready 中指定，然后再绑定 click 事件。

【解决方案2】：

试试这个

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
<div class="sitesection">
    <p class="expand"><a href="#">Click Here To Display The Content</a></p>
    <p class="content">Hello World!"</p>
</div>
<script>
$('.expand').click(function(){
    $('.content').slideToggle('slow');
});
</script>
</body>
</html>

或者加载文档后必须调用javascript。

【讨论】：

“试试这个 [code]”答案没有用。请说明您更改了什么、更改的原因以及解决问题的原因。
@NiettheDarkAbsol 我最后的代码