無法在網頁上進行可折疊的工作

Question

我正在嘗試制作一個可折疊的（希望是簡單的）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>

Answer 1

由於答案就像在使用它的代碼之前未加載 jQuery 一樣簡單，我想我會發布我建議的故障排除步驟作為答案。 這個問題可能被標記為重復，但如果沒有，也許有人會偶然發現它並得到幫助...... idk。

1. 確保在包含 jQuery 庫之后添加任何使用 jQuery 的代碼（通常我在正文末尾包含 jQuery，然后包含任何自定義腳本，但這是個人偏好）。
2. 檢查瀏覽器控制台 (F12) 是否有錯誤 - 通常這些很容易理解，或者您可以搜索錯誤消息。
3. 如果 jQuery 在添加元素之前嘗試選擇一個元素（因為 jQuery 出現在 HTML 代碼之前，或者因為 HTML 代碼是在加載后動態添加的），它將找不到元素 - 因此添加偵聽器不會做任何事情。 要么確保代碼在元素之后，將偵聽器附加到父/祖先並指定要偵聽的元素（例如$(document).on('click', 'p', function() { /*...*/ })將一個監聽器附加到整個文檔，該監聽器只會在一個段落被點擊時運行），或者使用$(function() { /* code here */ })來確保您的代碼在頁面之前不會運行加載完畢。
4. 如果您不確定代碼是否無法運行，或者它是否正在運行並且沒有影響任何內容，則console.log()非常有用。 如果沒有任何記錄，則代碼未運行。