首页HTML中如何实现奶茶类别的分类展示代码？

HTML中如何实现奶茶类别的分类展示代码？

时间: 2024-09-07 11:06:37 浏览: 61

在HTML中实现奶茶类别的分类展示，通常会结合CSS和JavaScript来完成。下面是一个简单的例子来展示如何使用HTML结合CSS和JavaScript来创建一个奶茶类别的分类展示。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>奶茶分类展示</title> <style> .category { margin: 10px 0; } .category-title { font-weight: bold; } .item { margin: 5px 0; cursor: pointer; } </style> </head> <body> <div class="category"> <div class="category-title">传统奶茶</div> <div class="item">原味奶茶</div> <div class="item">珍珠奶茶</div> <div class="item">椰果奶茶</div> </div> <div class="category"> <div class="category-title">特色奶茶</div> <div class="item">黑糖珍珠奶茶</div> <div class="item">芒果冰沙奶茶</div> <div class="item">芝士奶盖奶茶</div> </div> <script> // JavaScript代码可以用来增加一些交互性，例如点击分类展开或折叠详情 document.querySelectorAll('.category-title').forEach(title => { title.addEventListener('click', function() { const items = this.nextElementSibling.children; for (let i = 0; i < items.length; i++) { items[i].style.display = items[i].style.display === 'none' ? 'block' : 'none'; } }); }); </script> </body> </html> ``` 在上述代码中，使用了基本的HTML结构来创建奶茶类别和各个项目。CSS样式用来美化展示效果，而JavaScript代码则实现了一个简单的交互功能，当用户点击某个类别标题时，能够展开或折叠该类别下的奶茶项目。

阅读全文