<!DOCTYPE html>
可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header-dropbtn {border: none;cursor: pointer; }
.header-dropbtn:hover,
.header-dropbtn:focus { /* 对按钮的点击时的,鼠标聚焦的样式设置 */ box-shadow: 0px 1px 10px 1px deepskyblue; }
.header-dropdown { /* 对按钮盒子的样式设置,可以添加多个按钮 */ position: relative; display: inline-block; }
.header-dropdown-content { display: none; /* 一定要用css进行隐藏 */position: absolute; /* 相对于按钮大大的位置是绝对的 */ overflow: auto; z-index: 1; }
.header-dropdown-content a { /* 对加入的链接的样式 */ text-decoration: none; display: block; // }
.header-dropdown a:hover { /* 对下拉菜单中所有链接进行设置 */ }
.show { /* 利用js对操作进行的修改 */ display: block; /* 点击恢复 */ }
button{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="header-dropdown">
<button onclick="dropdown();" class="header-dropbtn"></button>
<div id="header-dropduwn" class="header-dropdown-content">
<a href="#">dsadsadsa</a>
<a href="">dsadsadsadsa</a>
<a href="">dsadsadsadsad</a>
</div>
</div>
<script>
function dropdown()
{ //切换 document.getElementById('header-dropdown').classList.toggle('show');
var el = document.getElementById('header-dropbtn'); //需要美化时候:点击增加新的样式 }
var dropdowns = document.getElementsByClassName('header-dropdown-content')[0];
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.add('show')) {
openDropdown.classList.remove('show');
};
}
}
document.querySelector('.header-dropbtn').addEventListener('click', function(e) {
document.querySelector('.header-dropdown-content').classList.toggle('show');
e.stopPropagation(); //阻止冒泡
}, false);
document.querySelector('.header-dropdown').addEventListener('click',function(e) {
e.stopPropagation();
}, false);
document.addEventListener('click',
function() {
document.querySelector('.header-dropdown-content').classList.remove('show');
}, false)
</script>
</body>
</html>
你看看是不是这样。自己多注意细节上的东西。还有你复制的代码好乱。我理了半天
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header-dropbtn {border: none;cursor: pointer; }
.header-dropbtn:hover,
.header-dropbtn:focus { /* 对按钮的点击时的,鼠标聚焦的样式设置 */ box-shadow: 0px 1px 10px 1px deepskyblue; }
.header-dropdown { /* 对按钮盒子的样式设置,可以添加多个按钮 */ position: relative; display: inline-block; }
.header-dropdown-content { display: none; /* 一定要用css进行隐藏 */position: absolute; /* 相对于按钮大大的位置是绝对的 */ overflow: auto; z-index: 1; }
.header-dropdown-content a { /* 对加入的链接的样式 */ text-decoration: none; display: block; // }
.header-dropdown a:hover { /* 对下拉菜单中所有链接进行设置 */ }
.show { /* 利用js对操作进行的修改 */ display: block; /* 点击恢复 */ }
button{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="header-dropdown">
<button onclick="dropdown();" class="header-dropbtn"></button>
<div id="header-dropduwn" class="header-dropdown-content">
<a href="#">dsadsadsa</a>
<a href="">dsadsadsadsa</a>
<a href="">dsadsadsadsad</a>
</div>
</div>
<script>
function dropdown()
{ //切换 document.getElementById('header-dropdown').classList.toggle('show');
var el = document.getElementById('header-dropbtn'); //需要美化时候:点击增加新的样式 }
var dropdowns = document.getElementsByClassName('header-dropdown-content')[0];
// var i;
// for (i = 0; i < dropdowns.length; i++) {
// var openDropdown = dropdowns[i];
// }
if (openDropdown.classList.add('show')) {
openDropdown.classList.remove('show'); }; };
document.querySelector('.header-dropbtn').addEventListener('click',
function(e) { document.querySelector('.header-dropdown').classList.add('show');
e.stopPropagation(); //阻止冒泡
}, false);
document.querySelector('.header-dropdown').addEventListener('click',
function(e) { e.stopPropagation(); }, false);
document.addEventListener('click',
function() {
document.querySelector('.header-dropdown').classList.remove('show');
}, false)
</script>
</body>
</html>
额，不知道为啥，复制上去还好好的，提交就好乱了。