html实现菜单点击小三角展开和收回

游戏开发
2025-09-11 22:15:01

1. 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>带小三角的参数设置菜单</title> <style> /* 容器定位‌:ml-citation{ref="4,7" data="citationList"} */ .dropdown { position: relative; display: inline-block; margin: 20px; } /* 按钮基础样式‌:ml-citation{ref="4,7" data="citationList"} */ .dropbtn { background: #4CAF50; color: white; padding: 10px 35px 10px 15px; border: none; border-radius: 4px; cursor: pointer; position: relative; transition: all 0.3s; } /* CSS绘制小三角‌:ml-citation{ref="1,4" data="citationList"} */ .triangle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid white; transition: transform 0.3s; } /* 下拉菜单容器‌:ml-citation{ref="4,7" data="citationList"} */ .dropdown-content { display: none; position: absolute; min-width: 160px; background: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-top: 5px; border-radius: 4px; opacity: 0; transition: opacity 0.3s; } /* 展开状态‌:ml-citation{ref="2,4" data="citationList"} */ .active .dropdown-content { display: block; opacity: 1; } .active .triangle { transform: translateY(-50%) rotate(180deg); } /* 菜单项交互‌:ml-citation{ref="4,7" data="citationList"} */ .dropdown-content a { display: block; padding: 10px 15px; color: #333; text-decoration: none; transition: background 0.2s; } .dropdown-content a:hover { background: #f8f9fa; } </style> </head> <body> <div class="dropdown"> <button class="dropbtn" onclick="toggleMenu()" aria-expanded="false"> 参数设置 <i class="triangle"></i> </button> <div class="dropdown-content"> <a href="#" tabindex="0">显示设置</a> <a href="#" tabindex="0">声音设置</a> <a href="#" tabindex="0">隐私选项</a> </div> </div> <script> // 切换菜单状态‌:ml-citation{ref="2,4" data="citationList"} function toggleMenu() { const dropdown = document.querySelector('.dropdown'); const isActive = dropdown.classList.toggle('active'); dropdown.querySelector('.dropbtn').setAttribute('aria-expanded', isActive); } // 点击外部关闭‌:ml-citation{ref="2,4" data="citationList"} document.addEventListener('click', (e) => { if (!e.target.closest('.dropdown')) { document.querySelector('.dropdown').classList.remove('active'); } }); // 键盘导航支持‌:ml-citation{ref="4,7" data="citationList"} document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { document.querySelector('.dropdown').classList.remove('active'); } }); </script> </body> </html> 2. 效果

标签：

html实现菜单点击小三角展开和收回由讯客互联游戏开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“html实现菜单点击小三角展开和收回”

上一篇
涨薪技术|JMeter异步接口测试实战

下一篇
线程POSIX信号量/基于环形队列的⽣产消费模型