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

登录 · 发表于 2025-10-20 20:42:39

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. 效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告

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

本帖子中包含更多资源

天津储鑫盛钢材现货供应商