HTML 和 JavaScript 实现点击后出现下拉框
要实现点击后出现下拉框，可以使用 HTML 和 JavaScript 来实现。
首先，你可以在 HTML 中创建一个按钮元素和一个下拉框元素。按钮用来触发下拉框的显示和隐藏，下拉框用来显示选项。
<button onclick='toggleDropdown()'>点击</button>
<select id='dropdown' style='display: none;'>
<option value='option1'>选项1</option>
<option value='option2'>选项2</option>
<option value='option3'>选项3</option>
</select>
接下来，在 JavaScript 中创建一个函数 toggleDropdown()，用来切换下拉框的显示和隐藏状态。
function toggleDropdown() {
var dropdown = document.getElementById('dropdown');
if (dropdown.style.display === 'none') {
dropdown.style.display = 'block';
} else {
dropdown.style.display = 'none';
}
}
在这个函数中，我们首先通过 document.getElementById() 方法获取到下拉框的元素对象。然后，我们使用 style.display 属性来判断下拉框的当前显示状态。如果下拉框的 display 属性为 none，则将其设置为 block，即显示下拉框；反之，将其设置为 none，即隐藏下拉框。
最后，我们将这段 JavaScript 代码放在 <script> 标签中，放在 HTML 文件的 <body> 部分的末尾。
<script>
function toggleDropdown() {
var dropdown = document.getElementById('dropdown');
if (dropdown.style.display === 'none') {
dropdown.style.display = 'block';
} else {
dropdown.style.display = 'none';
}
}
</script>
这样，当点击按钮时，就会调用 toggleDropdown() 函数，从而切换下拉框的显示和隐藏状态。
原文地址: https://www.cveoy.top/t/topic/qf82 著作权归作者所有。请勿转载和采集!