Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

js toggle

作者:我说°走了就别回来   发布日期:2025-02-14   浏览:231

// 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'; // 如果内容是显示的,则隐藏它
  }
});

解释说明:

  • HTML部分:包含一个按钮 (<button>) 和一个 div,其中 div 的初始样式设置为 display: none;,表示默认是隐藏的。
  • JavaScript部分:通过 addEventListener 监听按钮的点击事件。当点击按钮时,检查 divdisplay 样式属性,如果是 none 则将其改为 block(显示),否则将其改为 none(隐藏)。这样就可以实现点击按钮切换显示和隐藏内容的效果。

希望这个示例能帮助你理解如何使用 JavaScript 实现 toggle 功能。

上一篇:js 添加style

下一篇:js style

大家都在看

js 数组对象排序

js 数组删掉第一个值

js fill

js 数组复制

js 复制数组

js 数组拷贝

js 对象转数组

js 深拷贝数组

js 获取今天年月日

js jsonp

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站