用js实现下拉菜单
使用HTML和CSS创建基础结构
HTML部分需要包含一个触发下拉的按钮（如<button>）和隐藏的下拉内容容器（如<div>）。CSS用于控制下拉内容的显示与隐藏：
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}
.dropdown-content a {
display: block;
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}通过JavaScript控制显示/隐藏
使用classList.toggle()动态切换CSS类实现交互：
document.querySelector('.dropbtn').addEventListener('click', function() {
document.querySelector('.dropdown-content').classList.toggle('show');
});需在CSS中新增.show类：
.show {
display: block;
}点击外部区域关闭菜单
监听全局点击事件，判断点击目标是否在菜单区域内：
window.addEventListener('click', function(event) {
const dropdown = document.querySelector('.dropdown');
if (!dropdown.contains(event.target)) {
const content = document.querySelector('.dropdown-content');
content.classList.remove('show');
}
});动态生成下拉选项
通过数据数组动态生成菜单项：
const items = ['首页', '产品', '关于我们'];
const dropdown = document.querySelector('.dropdown-content');
items.forEach(item => {
const link = document.createElement('a');
link.href = '#';
link.textContent = item;
dropdown.appendChild(link);
});添加动画效果
使用CSS过渡属性实现平滑展开效果：
.dropdown-content {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s, transform 0.3s;
}
.dropdown-content.show {
opacity: 1;
transform: translateY(0);
}响应式适配
通过媒体查询调整小屏幕下的样式：
@media (max-width: 600px) {
.dropdown-content {
min-width: 100%;
}
}
