是一种常见的前端交互效果,可以通过JavaScript和CSS来实现。
具体实现方法如下:
<div id="button">点击我</div>
<div id="menu">
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</div>
#button {
background-color: #ccc;
padding: 10px;
cursor: pointer;
}
#menu {
display: none;
}
#menu ul {
list-style: none;
padding: 0;
}
#menu li {
padding: 5px;
background-color: #f1f1f1;
cursor: pointer;
}
var button = document.getElementById('button');
var menu = document.getElementById('menu');
button.addEventListener('click', function() {
if (menu.style.display === 'none') {
menu.style.display = 'block';
} else {
menu.style.display = 'none';
}
});
以上代码实现了通过单击另一个div打开列表下拉菜单的效果。点击按钮时,下拉菜单会显示或隐藏。你可以根据实际需求进行样式和交互的调整。
领取专属 10元无门槛券
手把手带您无忧上云