button点击后弹出ul的其他li,类似下拉框
时间: 2024-03-13 13:47:43 浏览: 24
要实现类似下拉框的效果,可以将要显示的选项放在一个 `<ul>` 元素中,并使用 CSS 控制其显示和隐藏。然后,在一个按钮的点击事件中,切换这个 `<ul>` 元素的显示状态即可。
下面是一个简单的例子:
```html
<button id="dropdown-btn">下拉框</button>
<ul id="dropdown-list">
<li>选项 1</li>
<li>选项 2</li>
<li>选项 3</li>
</ul>
```
CSS:
```css
#dropdown-list {
display: none;
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#dropdown-list li {
cursor: pointer;
padding: 4px;
background-color: #eee;
}
#dropdown-list li:hover {
background-color: #ddd;
}
```
JavaScript:
```js
var dropdownBtn = document.getElementById("dropdown-btn");
var dropdownList = document.getElementById("dropdown-list");
dropdownBtn.addEventListener("click", function() {
if (dropdownList.style.display === "none") {
dropdownList.style.display = "block";
} else {
dropdownList.style.display = "none";
}
});
```
这个例子中,当用户点击按钮时,会切换 `<ul>` 元素的显示状态。如果它之前是隐藏的,那么就会显示出来,否则就会隐藏起来。用户可以点击 `<li>` 元素来选择其中的选项。