多级（最多3级）垂直菜单与引导/ Jquery [英] Multilevel(upto 3 level) Vertical Menu with bootstrap/Jquery
问题描述
我试图创建一个导航菜单，它是垂直的，最多3级导航，最后一级是可切换菜单（当点击最后一级菜单时，一组子菜单出现在下面）。菜单结构类似于此
I am trying to create a navigation menu which is vertical and up to 3-level navigation and last level is toggable menu (when u click on last level menu,a set of submenu appears below that).A sample structure of the menu structure is similar to this
我尝试了下面的代码，但没有得到所需的输出。
I tried below code but doesn't getting desired output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap </title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="StyleSheet1.css" rel="stylesheet" />
<!-- Optional theme
<link rel="stylesheet" href="">
-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.dropdown-submenu {
position: relative;
border-bottom: 1px solid #ccc;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 column margintop20">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" href="#">Pre-advice</a></li>
<li class="dropdown-submenu"><a href="#">Strategy & Technical</a></li>
<li class="dropdown-submenu"><a href="#">Research</a></li>
<li class="dropdown-submenu active">
<a href="#">APL & Products</a>
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">
Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px;">Platforms</li>
<li style="padding: 10px 15px;">Managed Funds</li>
<li style="padding: 10px 15px;">Wealth Protection</li>
<li style="padding: 10px 15px;">Listed Securities</li>
<li style="padding: 10px 15px;">Wealth Protection</li>
<li style="padding: 10px 15px;">Listed Securities</li>
<li style="padding: 10px 15px;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li>
<li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#">Implementation</a></li>
<li class="dropdown-submenu"><a href="#">Review</a></li>
<li class="dropdown-submenu"><a href="#">Execution Only</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a href="#">Personal Development</a></li>
<li class="dropdown-submenu"><a href="#">Practice</a></li>
<li class="dropdown-submenu"><a href="#">News</a></li>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
</script>
</body>
</html>
有没有办法使用bootstrap创建一个垂直的多级菜单结构，jquery我没有任何具有垂直方向的多级菜单。由于此代码的css问题，无法创建类似的导航菜单，任何帮助将非常感谢。
Is there any way to create a vertical multilevel menu structure using bootstrap,jquery I haven't got any multilevel menus with vertical orientation .Facing css issues with this code,not able to create similar navigation menu,any help will be highly appreciated
推荐答案
这可能不是你正在寻找的答案，但它是我会在你的情况下做。
This may not be the answer you are looking for but it's what I would do in your case.
我有时使用引导，但是，我的拙见，人们经常认为这是一个神奇的代码，可以让你做任何你想要的，最近我发现人们花更多的时间试图修改引导css而不是从头开始整个css（如果你知道一点点基本css），而不是说这么多的网络看起来这么简单。
I use sometimes bootstrap but, as good as it is, in my humble opinion, people are very often thinking it's a miraculous code that can make you do whatever you want, and lately I am finding people spent more time trying to modified bootstrap css's than making the whole css's from scratch (if you know a bit of basic css), not to say so many webs "looking" so simillar.
对于你想做什么我基本上清除所有类的HTML，只是狙击从容器中的元素我可以做一个菜单，你在图像中显示（嗯，它需要一些额外的风格，如添加箭头图标，阴影等等，但要点是给你另一种方式做）。
For what you want to do I would basically clearing ALL classes in the html and just sniping the elements from the container I could do a menu as you show in the image (well, it needs some extra style like adding the arrow icons, shadows and such, but the point is to show you another way to do it).
html：
<div class="container">
<ul class="">
<li class="">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="">
<li class=""><a tabindex="-1" href="#">Pre-advice</a></li>
<li class=""><a href="#">Strategy & Technical</a></li>
<li class=""><a href="#">Research</a></li>
<li class="">
<a href="#">APL & Products</a>
<ul class="parent">
<li >
<a href="#">
Approved Product List
</a>
<ul class="child">
<li >Platforms</li>
<li >Managed Funds</li>
<li >Wealth Protection</li>
<li >Listed Securities</li>
<li >Wealth Protection</li>
<li >Listed Securities</li>
<li >Listed Securities</li>
</ul>
</li>
<li ><a href="#">Model Portfolios</a></li>
<li ><a href="#">Non-approved Products</a></li>
</ul>
</li>
<li class=""><a href="#">Implementation</a></li>
<li class=""><a href="#">Review</a></li>
<li class=""><a href="#">Execution Only</a></li>
</ul>
</li>
<li ><a href="#">Personal Development</a></li>
<li ><a href="#">Practice</a></li>
<li ><a href="#">News</a></li>
</ul>
</div>
并且只是这个css（请注意，当我直接调用 a> 标签，您可能需要使用不同的方式：
And just this css (please notice that when I call directly a <a> tag you may need to call it a different way:
html, body {
margin:0;
padding:0;
height:100%;
}
* {box-sizing: border-box;}
.container {
height:100%;
}
a {
color:#fff;
text-decoration:none;
border-bottom:1px dotted #fff;
padding:0px 0px 20px 0px;
width:100%;
display:block;
height:100%;
}
li {
padding:20px 20px 0 20px;
width:100%;
color:#fff;
}
.container ul {height:100%;}
.container > ul {
width:250px;
background-color:#224490;
position:relative;
overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
display:none;
position:absolute;
right:-250px;
top:0;
width:250px;
background-color:#18316a;
}
.container > ul > li:hover > ul {
display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
display:none;
position:absolute;
right:-250px;
top:0;
width:250px;
background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
border-bottom:1px dotted #fff;
padding:20px;
}
我已经保存了激活脚本的类，所以保持不变。
And I have just kept the classes that activate the script so keep it untouched.
FIDDLE
我希望这对你有用。
随意问任何问题，或者如果你想要修改的东西（当然，你不能尝试），我会尽我所能帮助你。
I hope this can be usefull for you. Feel free to ask any question or if you want something you want to modified (and you can't after, of course, trying) I will try my best to help you.
这篇关于多级（最多3级）垂直菜单与引导/ Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
