twitter-bootstrap 使用 Bootstrap with MVC 创建子菜单类型下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24177913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a submenu type dropdown with Bootstrap with MVC
提问by Purusartha
I have a model Categorythat has ParentId relationship with itself. I have restricted my model to only two levels of parent-child relationship. In my input form, the user shall be allowed to select from either the parent or child that is shown in the select list.
我有一个Category与自身具有 ParentId 关系的模型。我已经将我的模型限制为只有两个级别的亲子关系。在我的输入表单中，应允许用户从选择列表中显示的父项或子项中进行选择。
Also as I anticipate the list to be fairly large, I only want to display the children, when the user hovers over the parent.
此外，因为我预计列表会相当大，所以我只想在用户将鼠标悬停在父级上时显示子级。
I have spent a lot of time playing around with bootstrap menu/sub-menu to achieve this. There is a sample that comes close: http://www.bootply.com/iKJV5sCSYU#, where I create an EditorTemplate for the Category List, but I can not get the sub-menu to show. Here is what I tried to add a submenu to the above code:
我花了很多时间玩引导菜单/子菜单来实现这一点。有一个接近的示例：http: //www.bootply.com/iKJV5sCSYU#，我在其中为类别列表创建了一个 EditorTemplate，但无法显示子菜单。这是我尝试向上述代码添加子菜单的内容：
<div class="container">
<h2>Dropdown as Select</h2>
<div class="btn-group">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select a Country <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Item I</a></li>
<li><a href="#">Item II</a></li>
<li><a href="#">Item III</a></li>
<li><a href="#">Item IV</a></li>
<li><a href="#">Item V</a></li>
<li class="dropdown-submenu">
<a href="#">More..</a>
<ul class="dropdown-menu">
<li><a href="#">2nd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
</ul>
</div>
</div>
Can someone please point out if what I am trying to achieve is possible through this approach, or if there is an alternative way of meeting my requirement.
有人可以指出我试图通过这种方法实现的目标是否可行，或者是否有其他方法可以满足我的要求。
回答by AyB
Though Bootstrap doesn't come with your specific requirement, you could tweak in a few CSS properties to make it behave so:
尽管 Bootstrap 没有满足您的特定要求，但您可以调整一些 CSS 属性以使其行为如下：
li.dropdown-submenu:hover ul{
display: block;
left: 100%;
}
.dropdown-submenu{
position:relative;
}
.dropdown-submenu:hover .dropdown-menu{
top:0;
}
The point is to keep the dropdown-submenurelativeto the parent container but the 2nd-level menu absolute(which is by default). The left:100%takes the width of the parent menu and shifts the 2nd-level by that many pixels.
关键是要保留dropdown-submenurelative父容器，但保留二级菜单absolute（默认情况下）。的left:100%需要父菜单的宽度和由许多像素移位的第二级。
回答by sakir
try this one ,which is what u want
试试这个，这就是你想要的
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
html code
html代码
<div class="container">
<div class="row">
<h2>Multi level dropdown menu in Bootstrap 3</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#">Some action</a></li>
<li><a href="#">Some other action</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="#">Even More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
and css code here
和这里的css代码
.dropdown-submenu {
position: relative;
}
.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;
}
