HTML实现带过渡动画的手风琴式二级导航展开隐藏效果（附代码示例）

以下是一个使用 HTML、CSS 和 JavaScript 实现手风琴拉伸形式的二级导航展开隐藏效果的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <style> body { font-family: Arial, sans-serif; } ul { list-style-type: none; margin: 0; padding: 0; } ul ul { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; } li { border: 1px solid #ccc; padding: 10px; } li:hover { background-color: #f0f0f0; } li.active>ul { max-height: 500px; } </style> </head> <body> <ul> <li> <span>导航 1</span> <ul> <li>子项 1</li> <li>子项 2</li> <li>子项 3</li> </ul> </li> <li> <span>导航 2</span> <ul> <li>子项 1</li> <li>子项 2</li> </ul> </li> <li class="active"> <span>导航 3</span> <ul> <li>子项 1</li> <li>子项 2</li> <li>子项 3</li> <li>子项 4</li> </ul> </li> </ul> <script> var listItems = document.getElementsByTagName('li'); for (var i = 0; i < listItems.length; i++) { listItems[i].addEventListener('click', function () { var subList = this.getElementsByTagName('ul')[0]; for (var j = 0; j < listItems.length; j++) { listItems[j].classList.remove('active'); } this.classList.add('active'); }); } </script> </body> </html> ``` 在上述代码中，我们使用 CSS 实现了二级导航的初始隐藏和过渡效果。通过 JavaScript 为一级导航项添加点击事件，点击时切换 `active` 类来控制二级导航的展开和收缩。您可以根据需要进一步修改样式和内容。 ######[AI写代码神器 | 609点数解答 | 2024-10-11 11:07:03]

服务商

更多选项

快捷项

自定义