用 HTML、CSS 和 JS 实现带过渡动画的手风琴式二级导航展开隐藏效果

首先，我们需要创建一个HTML文件，包含一级导航栏和二级导航栏。然后，我们将使用CSS来设置样式和过渡动画效果。我们将使用JavaScript来实现手风琴效果。 1. 创建HTML结构： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手风琴导航</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="accordion"> <div class="accordion-item"> <h3 class="accordion-header">采购管理</h3> <ul class="accordion-content"> <li>采购计划</li> <li>供应商管理</li> <li>采购订单</li> </ul> </div> <div class="accordion-item"> <h3 class="accordion-header">库存管理</h3> <ul class="accordion-content"> <li>库存查询</li> <li>入库管理</li> <li>出库管理</li> </ul> </div>  </div> <script src="scripts.js"></script> </body> </html> ``` 2. 编写CSS样式： ```css /* styles.css */ body { font-family: Arial, sans-serif; } .accordion { width: 300px; background-color: #f9f9f9; border: 1px solid #ccc; } .accordion-item { border-bottom: 1px solid #ccc; } .accordion-header { padding: 10px; cursor: pointer; background-color: #eee; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } .accordion-content li { padding: 10px; border-bottom: 1px solid #ccc; } .accordion-content li:last-child { border-bottom: none; } ``` 3. 编写JavaScript代码： ```javascript // scripts.js document.addEventListener('DOMContentLoaded', function() { var accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(function(header) { header.addEventListener('click', function() { var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { var maxHeight = content.scrollHeight + 'px'; content.style.maxHeight = maxHeight; } }); }); }); ``` 现在，当你点击一级导航项时，二级导航将展开或收缩，并具有过渡动画效果。你可以根据需要修改HTML结构和CSS样式以满足其他要求。 ######[AI写代码神器 | 801点数解答 | 2024-10-11 11:30:17]

服务商

更多选项

快捷项

自定义