js点击出现二级下拉菜单
2018-01-25 14:12
148 查看
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <link rel="stylesheet" href="style.css"> <meta charset="utf-8" /> <style type="text/css"> body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #1f75cf; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #fafafa; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { color: white; background-color: #1f75cf; } .show { display: block; } </style> </head> <body> <ul> <li class="dropdown"> <a id="a" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a> <div class="dropdown-content" id="dropdown-a"> <a href="#">下拉 1</a> <a href="#">下拉 2</a> <a href="#">下拉 3</a> </div> </li> <li class="dropdown"> <a id="b" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a> <div class="dropdown-content" id="dropdown-b"> <a href="#">下拉 1</a> <a href="#">下拉 2</a> <a href="#">下拉 3</a> </div> </li> </ul> <script type="text/javascript"> function showList(o) { hideList("dropdown-content" + o.id); document.getElementById("dropdown-" + o.id).classList.toggle("show"); } function hideList(option) { var dropdowns = document.getElementsByClassName("dropdown-content"); for (var i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.id != option) { if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } window.onclick = function(e) { if (!e.target.matches('.dropbtn')) { hideList(""); } } </script> </body> </html>
相关文章推荐
- JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
- js二级下拉菜单
- 返回顶部,js,css,页面离开顶部一定距离后出现返回顶部,点击后滚动回顶部,支持IE,FF,chrome ,safari,opera[摘自布布分享,tech.bubufx.com]
- 最简单的纯js实现点击展开二级菜单功能
- js动态加载HTML元素时出现的无效的点击事件
- js实现文本框中鼠标点击关键字消失,失去焦点关键字出现
- 下拉菜单点击实现连接跳转功能的js代码
- js应用中的总结(菜单项点击,出现相应的内容)
- js+css实现超简洁的二级下拉菜单效果代码
- js如何实现点击标签文字,文字在文本框出现
- js如何实现点击标签文字,文字在文本框出现
- 禁止a标签点击的时候出现虚线边框(js版)
- js二级下拉菜单的关联
- 鼠标放在某个导航上时,二级下拉菜单及导航整体向左出现偏移
- js实现点击向下展开的下拉菜单效果代码
- TableView的点击出现和关闭下拉菜单的实现
- 全国省市二级联动下拉菜单 js版
- jq与JS点击显示隐藏二级菜单的几种方法
- js button贴上img图后 点击后出现周边框的蓝色阴影框
- activitygroup的子activity中嵌套webview,利用webview与js交互,在实现js点击的内部类代码中实现activity跳转出现的线程问题