时间戳

首页 > 解决方案 > 无法在网页上进行可折叠工作

javascript - 无法在网页上进行可折叠工作

问题描述

我正在尝试制作一个可折叠的（希望是简单的）DIV，并且正在使用我在这里找到的堆栈溢出的另一个答案，但我似乎无法让它在我的网站上工作。我确实对完整的链接和编码有所了解，这表明它确实有效（在小提琴中），但随后我将代码输入到我的页面中，它隐藏了第一张图片下方的内容（使用它作为分隔符）但是当我点击它没有任何反应（它不显示）

下面是 HTML 代码片段：

<p class="expand-one"><a href="#"></a> <img src="https://www.mywebsite.net/something/vip1.png"></p>
<p class="content-one">
<td width="33%" align="center" valign="top">
<br>
</td>
<td width="33%" align="center" valign="top">
<a href="http://www.mywebsite.net/bigslice" title="The Big Slice: Home of the Edge">
<font color="#dace77">[ m u s i c ]</font>
</a><br>
<font color="#FAF9B6">$ROOMNAME bigslice$</font><br>$USERLIST bigslice$<br>
</td>
</tr>
</p>

在我的 CSS 中，我简单地添加了以下内容：

<style>p.content-one {
display: none;
}
</style>

在正文结束之前，我拥有所有 JS 脚本

<script>
$('.expand-one').click(function() {
 $('.content-one').slideToggle('slow');
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

标签： javascripthtmljquery

解决方案

由于答案就像在使用它的代码之前没有加载 jQuery 一样简单，所以我想我会发布我建议的故障排除步骤作为答案。该问题可能被标记为重复，但如果没有，也许有人会偶然发现它并得到帮助...... idk。

  1. 确保在包含 jQuery 库之后添加任何使用 jQuery 的代码（通常我在正文末尾包含 jQuery，之后包含任何自定义脚本，但这是个人偏好）。
  2. 检查浏览器控制台 (F12) 是否有错误 - 通常这些很容易理解，或者您可以搜索错误消息。
  3. 如果 jQuery 在添加元素之前尝试选择元素（因为 jQuery 出现在 HTML 代码之前，或者因为 HTML 代码是在加载后动态添加的），它将找不到元素 - 因此添加侦听器不会做任何事情。要么确保代码出现在元素之后，将侦听器附加到父/祖先并指定要侦听的元素（例如$(document).on('click', 'p', function() { /*...*/ })，将侦听器附加到仅在单击段落时才运行的整个文档），或者用于$(function() { /* code here */ })确保您的代码在页面加载完成之前不会运行。
  4. console.log()如果您不确定代码是否无法运行，或者它是否正在运行并且不会影响任何内容，这将非常有用。如果没有记录，则代码没有运行。

推荐阅读