###
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.headcolor{
background-color: gray;
height: 100px;
}
.bodycolor{
background-color: green;
width: 50px;
}
.hide{
display: none;
}
.content1{
color: red;
}
</style>
</head>
<body style="margin: 0">
<div class="headcolor">111</div>
<div>
<div>
<div id="i1" class="bodycolor" onclick="hide(‘i1‘)">菜单一</div>
<div class="hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div>
<div id="i2" class="bodycolor" onclick="hide(‘i2‘)">菜单二</div>
<div class="hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div>
<div id="i3" class="bodycolor" onclick="hide(‘i3‘)">菜单三</div>
<div class="hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
</div>
<script>
function hide(nid) {
var d = document.getElementById(nid);
var item_list = d.parentElement.parentElement.children;
console.log(d);
for(var i=0;i<item_list.length;i++){
item_list[i].children[1].classList.add(‘hide‘);
}
d.nextElementSibling.classList.remove("hide")
}
// function hide(nid) {
// var d = document.getElementById(nid);
//
// console.log(d);
// d.nextElementSibling.classList.remove(‘hide‘);
// }
</script>
</body>
</html>
###
.headcolor { background-color: gray; height: 100px }
.bodycolor { background-color: green; width: 50px }
.hide { display: none }
.content1 { color: red }
头
菜单一
内容1
内容2
内容3
菜单二
内容1
内容2
内容3
菜单三
内容1
内容2
内容3
时间： 2024-08-29 20:47:12