以下是一个基于
jQuery实现的侧边栏二级
菜单的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Sidebar Menu</title>
<script src="https://code.
jquery.com/
jquery-3.5.1.min.js"></script>
<style>
/* 侧边栏样式 */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: #fff;
padding: 20px;
}
/* 一级
菜单样式 */
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar ul li {
margin-bottom: 10px;
}
.sidebar ul li a {
display: block;
color: #fff;
text-decoration: none;
font-size: 18px;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.sidebar ul li a:hover {
background-color: #555;
}
/* 二级
菜单样式 */
.sidebar ul ul {
display: none;
list-style: none;
padding: 0;
margin: 0;
margin-left: 20px;
}
.sidebar ul ul li {
margin-bottom: 5px;
}
.sidebar ul ul li a {
font-size: 16px;
padding: 5px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.sidebar ul ul li a:hover {
background-color: #555;
}
</style>
<script>
$(document).ready(function() {
// 显示/隐藏二级
菜单
$('.sidebar ul li').click(function() {
$(this).children('ul').slideToggle();
});
});
</script>
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="#">
菜单1</a></li>
<li>
<a href="#">
菜单2</a>
<ul>
<li><a href="#">子
菜单1</a></li>
<li><a href="#">子
菜单2</a></li>
<li><a href="#">子
菜单3</a></li>
</ul>
</li>
<li><a href="#">
菜单3</a></li>
<li>
<a href="#">
菜单4</a>
<ul>
<li><a href="#">子
菜单1</a></li>
<li><a href="#">子
菜单2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
```
该示例代码实现了一个简单的侧边栏二级
菜单，当用户点击一级
菜单时，会显示或隐藏对应的二级
菜单。其中，一级
菜单和二级
菜单都是使用`<ul>`和`<li>`标签实现的，通过CSS样式设置了
菜单的样式，通过
jQuery实现了
菜单的交互效果。
1917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
