我们来用js来写一个按钮控制菜单的功能
先来一个简单的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 2px solid red;
}
.div01 {
width: 100px;
height: 100px;
}
.div02 {
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="div01">Button</div>
<div class="div02">Menu</div>
</body>
</html>
现在我们有了一个Button和一个Menu
如果我们用hover选择器的话
可以这样来写
hover选择器有三种不同的控制方法
1. 中间什么都不加 控制子元素;
2. ‘+’ 控制同级元素(兄弟元素);
3. ‘~’ 控制就近元素;
这边我们的div是同级元素,所以用+号
看下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 2px solid red;
}
.div01 {
width: 100px;
height: 100px;
}
.div01:hover + .div02 {
display: none;
}
.div02 {
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="div01">Button</div>
<div class="div02">Menu</div>
</body>
</html>
如果不用hover,而要用点击的话,
就需要用js来实现
我们来写一个js方法
function display(id) {
let target = document.getElementById(id);
if (target.style.display == 'none') {
target.style.display = 'block';
} else {
target.style.display = 'none';
}
}
然后再来看看完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function display(id) {
let target = document.getElementById(id);
if (target.style.display == 'none') {
target.style.display = 'block';
} else {
target.style.display = 'none';
}
}
</script>
<style>
div {
border: 2px solid red;
}
.div01 {
width: 100px;
height: 100px;
}
.div02 {
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="div01" onclick="display('menu')">Button</div>
<div class="div02" id="menu">Menu</div>
</body>
</html>