// HTML部分
<button id="toggleButton">显示/隐藏内容</button>
<div id="content" style="display: none;">
这里是需要显示或隐藏的内容。
</div>
// JavaScript部分
document.getElementById('toggleButton').addEventListener('click', function() {
var content = document.getElementById('content');
if (content.style.display === 'none') {
content.style.display = 'block'; // 如果内容是隐藏的,则显示它
} else {
content.style.display = 'none'; // 如果内容是显示的,则隐藏它
}
});
<button>
) 和一个 div
,其中 div
的初始样式设置为 display: none;
,表示默认是隐藏的。addEventListener
监听按钮的点击事件。当点击按钮时,检查 div
的 display
样式属性,如果是 none
则将其改为 block
(显示),否则将其改为 none
(隐藏)。这样就可以实现点击按钮切换显示和隐藏内容的效果。希望这个示例能帮助你理解如何使用 JavaScript 实现 toggle 功能。
上一篇:js 添加style
下一篇:js style
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站