html+css+javascript 菜单单击式下拉菜单
html+css+javascript 做一个菜单，初始状态标题A和标题B的下拉表隐藏，点击标题A，出现下拉表。点击标题B，出现下拉表，同时标题A的下拉表收起。
HTML:
<html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8" />
</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 src="script.js"></script>
</body>
</html>
CSS (style.css):
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;
}
JavaScript (script.js):
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("");
}
}
点击标题 A：
点击标题 B：
JSFiddle 调试：jsfiddle.net/soL73u4y/2/
温馨提示：答案为网友推荐，仅供参考
第1个回答 2018-03-30
【方法步骤】：
写好HTML代码以实现下拉菜单。
在网页上看到初步效果。
添加JavaScript代码实现功能，hide（）函数实现display的隐藏。
在HTML代码中引用show()和hide()函数。
CTR+S保存代码，在浏览器中F5刷新网页查看效果。
【其他方法】：
利用Html5+css实现的下拉菜单炫酷效果。<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#nav{
background-color: #EEEEEE;
height: 40px;
<!DOCTYPE html>。
使用JavaScript实现下拉菜单的效果。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
通过JQuery方法实现的下拉菜单的炫酷效果。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
【注意事项】：记得CTR+S常记得保存的备份，F5刷新网页。
相似回答