下拉筛选菜单 html5

### 如何在HTML5中创建下拉筛选菜单 为了实现类似于Vant的`DropdownMenu`效果，在HTML5环境中可以采用多种方法来构建自定义的下拉筛选菜单。下面提供了一种基于纯HTML、CSS以及JavaScript的方式，这种方式不仅适用于桌面浏览器也兼容移动设备。 #### HTML结构 首先定义基本的HTML标记用于展示各个选项卡及其对应的内容区域： ```html <div class="dropdown-menu"> <!-- 菜单标题 --> <div class="menu-header">请选择</div> <!-- 下拉列表容器 --> <ul class="options-list" style="display:none;"> <li data-value="option1">选项一</li> <li data-value="option2">选项二</li> <li data-value="option3">选项三</li> </ul> </div> <!-- 显示所选项目的占位符 --> <span id="selected-item"></span> ``` #### CSS样式设计 接着通过CSS设置外观特性，使组件看起来更美观并适应不同屏幕尺寸： ```css .dropdown-menu { position: relative; } .menu-header { padding: .8em; background-color: #f9f9f9; border: 1px solid #ccc; cursor: pointer; } .options-list { margin-top: -1px; /* 去除顶部边距 */ list-style-type: none; padding-left: 0; max-height: 150px; overflow-y: auto; box-shadow: 0 4px 8px rgba(0,0,0,.1); z-index: 1000; width: 100%; display: block !important; } .options-list li { padding: .7em; text-align: center; transition: all .3s ease-in-out; } .options-list li:hover, .options-list li:focus { background-color: #eaeaea; } ``` #### JavaScript交互逻辑 最后利用简单的JavaScript脚本来处理用户的点击事件，并更新UI状态反映当前的选择情况： ```javascript document.querySelector('.menu-header').addEventListener('click', function() { document.querySelector('.options-list').style.display = this.parentNode.querySelector('.options-list').style.display === 'none' ? 'block' : 'none'; }); // 当用户选择了某个特定项时触发此函数 function handleOptionClick(event) { const selectedItemText = event.target.textContent.trim(); document.getElementById('selected-item').textContent = `已选择：${selectedItemText}`; document.querySelector('.menu-header').textContent = selectedItemText; document.querySelector('.options-list').style.display = 'none'; // 关闭菜单 // 防止冒泡影响其他元素 event.stopPropagation(); } // 给每一个<li>标签绑定点击监听器 const optionsListItems = document.querySelectorAll('.options-list li'); for (let item of optionsListItems) { item.addEventListener('click', handleOptionClick); } // 点击页面任意位置关闭打开的状态下的菜单 window.addEventListener('click', () => { if(document.querySelector('.options-list').style.display !== 'none'){ document.querySelector('.options-list').style.display = 'none'; } }); ``` 上述代码片段展示了如何仅依靠前端技术栈（即HTML、CSS和JS）快速搭建起一个基础版本的可交互式下拉筛选菜单[^3]。当然实际应用中可能还需要考虑更多细节比如性能优化、跨平台适配等问题。