bootstrap左侧折叠二级菜单
时间: 2023-09-04 21:01:05 浏览: 118
在Bootstrap中,可以使用Collapse组件来实现左侧折叠二级菜单。
首先,在HTML文件中设置好导航栏的结构,包含一级菜单和二级菜单的列表。在一级菜单中,为二级菜单的父级li元素添加一个指示的data-toggle属性,并为其赋值为"collapse",还需要为其指定data-target属性,值为要折叠的二级菜单的ID。在二级菜单的父级li元素中添加一个class为"collapse"的样式,用于隐藏二级菜单。
然后,在JavaScript文件中,使用jQuery来监听一级菜单的点击事件。当一级菜单被点击时,使用toggle()方法来切换二级菜单的显示与隐藏。
最后,在CSS文件中,可以自定义一级菜单和二级菜单的样式,如背景色、字体样式等。
通过以上的步骤,即可实现Bootstrap左侧折叠二级菜单。
相关问题
bootstrap 包含二级菜单的完整网页代码
以下是一个包含二级菜单的完整网页代码,使用了Bootstrap框架的导航栏组件和下拉菜单组件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 二级菜单</title>
<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入jQuery文件 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入Bootstrap JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 导航栏头部 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">导航菜单切换</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- 导航栏内容 -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<!-- 下拉菜单 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">产品 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">更多产品</li>
<!-- 二级下拉菜单 -->
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">子产品</a>
<ul class="dropdown-menu">
<li><a href="#">子产品1</a></li>
<li><a href="#">子产品2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</body>
</html>
```
在上面的代码中,我们使用`<nav>`元素创建了一个导航栏,其中包含了几个菜单项。其中第三个菜单项使用了下拉菜单组件,包含了几个子菜单项。其中第四个子菜单项是一个二级下拉菜单,使用了`dropdown-submenu`类来实现。运行该代码,即可看到一个包含二级菜单的导航栏。
html 中Bootstrap实现可折叠3级菜单分组侧边导航菜单
好的,实现一个三级可折叠菜单的方法跟实现两级菜单的方法类似,只需要再嵌套一层即可。下面是实现三级可折叠菜单的代码:
```
<div class="sidebar">
<ul class="nav">
<li>
<a href="#">一级菜单1</a>
</li>
<li>
<a href="#">一级菜单2</a>
</li>
<li>
<a href="#submenu1" data-toggle="collapse">一级菜单3</a>
<ul id="submenu1" class="collapse">
<li>
<a href="#">二级菜单1</a>
</li>
<li>
<a href="#subsubmenu1" data-toggle="collapse">二级菜单2</a>
<ul id="subsubmenu1" class="collapse">
<li><a href="#">三级菜单1</a></li>
<li><a href="#">三级菜单2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
```
上面的代码中,我们新增了一个二级菜单项,它包含一个子菜单,这个子菜单又包含两个三级菜单项。注意,三级菜单项不需要再设置 collapse 类。
然后,需要在 JavaScript 中初始化 Collapse 组件。代码如下:
```
<script>
$(document).ready(function() {
$('.collapse').collapse();
});
</script>
```
现在,我们就成功实现了一个三级可折叠菜单的侧边导航菜单。用户点击菜单项3时,它的子菜单展开,再点击二级菜单项2时,它的子菜单也展开。再次点击二级菜单项2时,它的子菜单折叠起来。
希望这个回答能够帮到你。如果还有其他问题,请随时提出。