html点击按钮出现下拉框
在HTML中，要实现点击按钮出现下拉框，可以使用<select>元素配合<option>元素来创建下拉框，但这种方法比较low。下面是一个通过js实现的下拉框例子：
<!DOCTYPE html>
<html>
<head>
<title>下拉框示例</title>
<script>
function toggleDropdown() {var dropdown = document.getElementById("myDropdown");dropdown.classList.toggle("show");
}// 点击其他地方关闭下拉框
window.onclick = function(event) {if (!event.target.matches('.dropbtn')) {var dropdowns = document.getElementsByClassName("dropdown-content");var i;for (i = 0; i < dropdowns.length; i++) {var openDropdown = dropdowns[i];if (openDropdown.classList.contains('show')) {openDropdown.classList.remove('show');}}}
}
</script>
<style>
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}.dropdown {position: relative;display: inline-block;
}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;
}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;
}.dropdown-content a:hover {background-color: #f1f1f1}.show {display:block;}
</style>
</head>
<body><h2>点击按钮出现下拉框</h2><div class="dropdown"><button onclick="toggleDropdown()" class="dropbtn">点击我</button><div id="myDropdown" class="dropdown-content"><a href="#">链接 1</a><a href="#">链接 2</a><a href="#">链接 3</a></div>
</div></body>
</html>