js点击某一导航栏项右侧出现下拉列表
时间: 2023-08-06 13:01:43 浏览: 61
可以通过给导航栏项添加点击事件,然后在事件处理函数中动态创建下拉列表元素并设置其样式和内容来实现。
示例代码:
HTML:
```html
<ul>
<li id="nav-item1">导航栏项1</li>
<li id="nav-item2">导航栏项2</li>
<li id="nav-item3">导航栏项3</li>
</ul>
```
CSS:
```css
.dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
z-index: 999;
}
.dropdown-item {
padding: 10px;
cursor: pointer;
}
.dropdown-item:hover {
background-color: #eee;
}
```
JavaScript:
```javascript
var navItem1 = document.getElementById("nav-item1");
var dropdown1 = null;
navItem1.addEventListener("click", function() {
if (dropdown1) {
dropdown1.remove();
dropdown1 = null;
return;
}
dropdown1 = document.createElement("div");
dropdown1.classList.add("dropdown");
var dropdownItem1 = document.createElement("div");
dropdownItem1.classList.add("dropdown-item");
dropdownItem1.innerText = "下拉列表项1";
dropdownItem1.addEventListener("click", function() {
alert("你点击了下拉列表项1");
});
var dropdownItem2 = document.createElement("div");
dropdownItem2.classList.add("dropdown-item");
dropdownItem2.innerText = "下拉列表项2";
dropdownItem2.addEventListener("click", function() {
alert("你点击了下拉列表项2");
});
dropdown1.appendChild(dropdownItem1);
dropdown1.appendChild(dropdownItem2);
navItem1.parentNode.appendChild(dropdown1);
});
```
以上代码实现了点击导航栏项1时,在其右侧动态添加一个下拉列表。你可以根据自己的需要修改样式和内容。