如何使用 Javascript 創建更多顯示或顯示更少可切換按鈕？
[英]How to create a show more or show less toggleable button with Javascript?
問題描述
我在嘗試使我的代碼可切換時遇到問題。 我可以按下按鈕，它會顯示隱藏的任何內容，但是，當我再次嘗試按下按鈕時，它不會隱藏內容。 我在這里做錯了什么？
let toggle = document.querySelector('#chevron'); toggle.addEventListener("click", function(event) { event.preventDefault() let press = toggle.value; if (press = "fas fa-chevron-right") { document.getElementById("content").classList = ''; document.getElementById("chevron").innerHTML = 'SHOW LESS <i class="fas fa-chevron-down"></i>'; } else if (press = "fas fa-chevron-down") { document.getElementById("content").classList = 'hidden'; document.getElementById("chevron").innerHTML = 'MORE <i class="fas fa-chevron-right"></i>'; } });
.hidden { display: none; } a { text-decoration: none; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="ie=edge" http-equiv="X-UA-Compatible"> <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"> <link href="styles.css" rel="stylesheet"> <script defer src="main.js"></script> </head> <body> <a href="#" id="chevron" onclick="toggle"> SHOW MORE <i class="fas fa-chevron-right"></i></a> <div id="content" class="hidden"> <div> <ul> <li>Lorem Ipsum</li> <li>Lorem Ipsum</li> <li>Lorem Ipsum</li> </ul> </div> </div> </body> </html>
4 個解決方案
解決方案1
2 2019-12-10 05:59:32
您可以為此使用<details> HTML 元素。
HTML 詳細信息元素 (<details>) 創建一個披露小部件，其中信息僅在小部件切換到“打開”狀態時可見。 可以使用 <summary> 元素提供摘要或標簽。
有關詳細信息元素的更多信息，請點擊此處。
例子：
<details> <summary>Copyright 1999-2018.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>
解決方案2
0 2019-12-10 05:59:11
我看到您將兩個事件處理程序附加到錨元素。 首先作為 'onclick' 屬性事件處理程序，並在 js 中使用 addEventListener 方法。 我建議您只使用 addEventListener 並刪除“onclick”處理程序。
解決方案3
0 2019-12-10 06:04:59
您似乎在if語句中分配了值"fas fa-chevron-right"以press 。 這樣做的結果是它總是返回真。
嘗試更像以下內容：
let isOpen = false;
document.getElementById("chevron").addEventListener("click", function(event) {
event.preventDefault()
if (!isOpen) {
document.getElementById("content").classList = '';
document.getElementById("chevron").innerHTML = 'SHOW LESS <i class="fas fa-chevron-down"></i>';
} else {
document.getElementById("content").classList = 'hidden';
document.getElementById("chevron").innerHTML = 'MORE <i class="fas fa-chevron-right"></i>';
}
isOpen = !isOpen;
});
解決方案4
0 2019-12-10 06:18:01
錯誤太多：
只有表單元素（輸入、選擇等）具有名為 value 的有效屬性，它顯示表單的實際內容。 Anchor 的值未定義。
在事件偵聽器中，您將條件子句放入 if (press = "fas fa-chevron-right") 之類的條件子句中，它無法按預期工作，因為它不檢查變量 press 是否等於 'fas fa-chevron-right '。 它只是為印刷機分配正確的值，結果始終是將轉換為 true 的正確值。 所以第一個塊一直被執行，細節顯示出來。
如何在 JavaScript 中編寫 Show more and show less
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.