bootstrap自己的多级下拉菜单
本文介绍了bootstrap自己的多级下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
bootstrap自己的多级下拉菜单在哪呀？谁能给我发个链接吗？
在bootstrap官网上面真心没找到呀,心累呀~~
是多级的呦！！！
这是我尝试的代码，显示不出二级菜单，请问正确的应该怎么写呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<ul class="dropdown-menu " role="menu" aria-labelledby="dLabel">
<li class="dropdown">
<a id="dLabel1" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a id="dLabel2" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Another action
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a id="dLabel3" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Something else
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel3">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</body>
</html>解决方案
http://v3.bootcss.com/compone...
http://v3.bootcss.com/javascr...
这两个，不知道你说的是哪个？
你说的多级菜单，如果不是这两个的话，那就没有了，bootstrap官方的就只有这两个。
你的代码，是显示了二级菜单的啊！效果是这样。
你想要的是三级菜单的效果吧，就是点击二级餐单的时候，会显示三级餐单的效果？？
这个在bootstrap的原生功能中是实现不了的，按照你的代码，我调试了一下，将三级餐单显示的时候，会错乱。效果如下：
要实现三级或多级菜单的话，你需要自己写控件，或者拓展bootsrap的功能，建议第一种，因为拓展bootstrap功能的话比较复杂，不如自己手动写一个来的快。
这篇关于bootstrap自己的多级下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
