本文主要是介绍0框架前端-如何写一个下拉菜单（Dropdowns），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
实现效果：
可以发现这个待实现效果，是我们之前实现的button下面加了一个button list而已，
点击上面的Click Me按钮，这个button list要toggleable显示和隐藏。之后再通过一个div wrap
这两个组件为一个组件即可。
button list 可以是一组竖着的<div> list ，也可以是一组竖着的<a>。简单起见，我们选<a> list
用<div> 来包住,display选flex以方便布局。
至于toggleable效果只需要监听click me 按钮，给下面的<a> list的父<div> 的style.display 设置 "none"或原来的flex即可。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.my_button{display: flex;height: 30px;width: 80px;background-color: #f1f1f1;align-items: center;justify-content: center;cursor: pointer;-webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10 and IE 11 */user-select: none; /* Standard syntax */}.my_button:hover{background-color: #dedede;}.drop_list_container{display: flex;flex-direction: column;}.drop_list_item {height: 24px;width: 103px;background-color: aliceblue;cursor: pointer;}.drop_list_item:hover{background-color: #d4dce3;}</style>
</head>
<body>
<div><div id="drop_down_button" class="my_button">Click Me</div><div id="drop_list_container" class="drop_list_container"><a class="drop_list_item">Link 1</a><a class="drop_list_item">Link 2</a><a class="drop_list_item">Link 3</a></div>
</div><script>var drop_down_button = document.getElementById('drop_down_button');var drop_list_container = document.getElementById('drop_list_container');drop_down_button.addEventListener('click', (event)=>{if(drop_list_container.style.display != 'none'){drop_list_container.style.display = 'none';}else {drop_list_container.style.display = 'flex';}})
</script>
</body>
</html>这篇关于0框架前端-如何写一个下拉菜单（Dropdowns）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
