下拉菜单js代码
时间: 2023-08-02 15:09:35 浏览: 45
下面是一个基本的下拉菜单的JavaScript代码实现:
```
function dropdownMenu() {
var x = document.getElementById("myDropdown");
if (x.className.indexOf("show") == -1) {
x.className += " show";
} else {
x.className = x.className.replace(" show", "");
}
}
window.onclick = function(event) {
if (!event.target.matches('.dropdown-btn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.className.indexOf('show') != -1) {
openDropdown.className = openDropdown.className.replace(' show', '');
}
}
}
}
```
这个代码会在点击下拉按钮时,打开或关闭下拉菜单。同时,它还包括了一个事件监听器,当用户点击页面上其它地方时,会自动关闭下拉菜单。代码中的 "myDropdown" 和 "dropdown-btn" 分别是下拉菜单的容器和下拉按钮的类名,你可以根据自己的需要进行修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)