如何使用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>

您可以使用<details>HTML元素。

HTML 详细信息元素 (
( 创建一个披露小部件，其中的信息仅在小部件切换到"打开"状态时才可见。可以使用<摘要>元素提供摘要或标签。

有关详细信息元素的更多信息，请参阅此处。

例：

<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>

我看到您正在将两个事件处理程序附加到锚元素。首先作为"onclick"属性事件处理程序，并在js中使用addEventListener方法。我建议您只使用 addEventListener 并删除"onclick"处理程序。

您似乎正在将值"fas fa-chevron-right"分配给if语句中的press。这样做的结果是它总是返回 true。

尝试类似以下内容的操作：

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

错误太多：

只有表单元素(输入、选择等(具有名为 value 的有效属性，它显示表单的实际内容。定位点的值未定义。
在事件侦听器中，你放置条件子句，如if(按="fas fa-chevron-right"(，它不能按预期工作，因为它不检查变量按是否等于'fas fa-chevron-right'。它只是将正确的值分配给印刷机，结果始终是正确的值，该值将转换为 true。因此，第一个块始终被执行，并且细节会显示出来。

相关内容

最新更新

热门标签：