使用script实现点击侧边栏父标题显示或隐藏子标题
时间: 2024-05-10 20:17:50 浏览: 5
你可以尝试以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>侧边栏</title>
<style>
/* 侧边栏样式 */
#sidebar {
width: 200px;
height: 100%;
background-color: #f2f2f2;
position: fixed;
top: 0;
left: -200px; /* 初始状态隐藏 */
transition: all 0.3s ease-in-out;
}
#sidebar.show {
left: 0; /* 显示 */
}
/* 父标题样式 */
.parent {
padding: 10px;
cursor: pointer;
}
/* 子标题样式 */
.child {
padding: 10px;
display: none; /* 初始状态隐藏 */
}
.child.show {
display: block; /* 显示 */
}
</style>
</head>
<body>
<div id="sidebar">
<!-- 父标题1 -->
<div class="parent" onclick="toggleChild(this)">父标题1</div>
<!-- 子标题1 -->
<div class="child">子标题1</div>
<!-- 子标题2 -->
<div class="child">子标题2</div>
<!-- 父标题2 -->
<div class="parent" onclick="toggleChild(this)">父标题2</div>
<!-- 子标题3 -->
<div class="child">子标题3</div>
</div>
<button onclick="toggleSidebar()">显示/隐藏侧边栏</button>
<script>
function toggleSidebar() {
var sidebar = document.getElementById("sidebar");
sidebar.classList.toggle("show");
}
function toggleChild(parent) {
var child = parent.nextElementSibling;
child.classList.toggle("show");
}
</script>
</body>
</html>
```
这段代码中,我们使用了 `classList.toggle()` 方法来切换元素的 class 属性,从而实现显示或隐藏侧边栏和子标题。同时,我们给父标题添加了 `onclick` 属性,并在函数中使用了 `nextElementSibling` 属性来获取下一个兄弟元素,即对应的子标题元素。