实现基本的左侧侧边栏折叠菜单的代码,要求打开子菜单的页面时主页的侧边栏仍然可见
时间: 2024-05-02 10:16:15 浏览: 186
基于jQuery实现左侧菜单栏可折叠功能
以下是实现基本的左侧侧边栏折叠菜单的代码,使用了 HTML、CSS 和 JavaScript:
HTML 代码:
```html
<div class="sidebar">
<div class="sidebar-header">
<h3>侧边栏</h3>
<span class="close-btn">×</span>
</div>
<ul class="sidebar-menu">
<li class="menu-item">
<a href="#">菜单项 1</a>
</li>
<li class="menu-item has-submenu">
<a href="#">菜单项 2</a>
<span class="submenu-btn">></span>
<ul class="submenu">
<li><a href="#">子菜单项 1</a></li>
<li><a href="#">子菜单项 2</a></li>
<li><a href="#">子菜单项 3</a></li>
</ul>
</li>
<li class="menu-item">
<a href="#">菜单项 3</a>
</li>
</ul>
</div>
```
CSS 代码:
```css
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #f3f3f3;
z-index: 999;
transition: all 0.3s ease-in-out;
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #ccc;
color: #fff;
}
.close-btn {
font-size: 24px;
cursor: pointer;
}
.sidebar-menu {
list-style: none;
padding: 0;
margin: 20px 0;
}
.menu-item {
padding: 10px 20px;
border-bottom: 1px solid #ddd;
}
.has-submenu .submenu-btn {
float: right;
font-size: 18px;
margin-top: 2px;
cursor: pointer;
}
.submenu {
display: none;
list-style: none;
padding: 0;
margin: 0;
}
.submenu li {
padding: 10px 40px;
border-bottom: 1px solid #ddd;
}
.submenu li:hover {
background-color: #eee;
}
```
JavaScript 代码:
```javascript
const sidebar = document.querySelector('.sidebar');
const closeBtn = document.querySelector('.close-btn');
const submenuBtns = document.querySelectorAll('.submenu-btn');
// 点击关闭按钮隐藏侧边栏
closeBtn.addEventListener('click', () => {
sidebar.style.transform = 'translateX(-200px)';
});
// 点击子菜单按钮显示/隐藏子菜单
submenuBtns.forEach(btn => {
btn.addEventListener('click', () => {
const submenu = btn.nextElementSibling;
if (submenu.style.display === 'none') {
submenu.style.display = 'block';
} else {
submenu.style.display = 'none';
}
});
});
```
在这段代码中,我们首先获取侧边栏的 DOM 元素及其中的关闭按钮和子菜单按钮。然后,我们为关闭按钮添加了点击事件,当点击按钮时,我们将侧边栏向左平移 200px,使其隐藏。接下来,我们为每个子菜单按钮添加了点击事件,当点击按钮时,我们获取该按钮的下一个元素(即对应的子菜单)并切换其 display 属性来显示或隐藏该子菜单。这里使用了 if/else 语句来切换 display 属性,因为子菜单的 display 初始值为 none。
阅读全文