Bootstrap 3.0:如何使垂直导航栏下拉列表不附加到最后一个列表项
Bootstrap 3.0: How to make vertical navbar dropdown not append to only last list item?
所以我有一个面板布局，我一直在拼凑，它有一个花哨的垂直导航栏。我已正确对齐它和所有内容，并且我已成功使下拉菜单以垂直方式显示，但是，由于某种原因，它总是附加到列表中的最后一项。我不明白它为什么要这样做。
我已经在下面发布了我的所有代码，并且从之前对仅显示菜单的初始问题的研究来看，我相信我的 css 是正确的，所以我想知道这是否可能是 boostrap 方面的 javascript 问题，但我目前没有 javascript 与侧菜单一起使用。
.CSS
/************
* side navbar
*************/
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -92px 0 0 100%;
border-radius: 0;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
.html
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li><a href="/">EXPIRATIONS</a></li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li><a href="/recruiting">RECRUITING</a></li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/equipment">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
有一个工作小提琴来演示我的问题是什么：
https://jsfiddle.net/ye1q4wfu/4/
我想要它做的是，当我单击带有下拉列表的列表项时。我希望下拉列表出现在它旁边。
只需将下拉列表的顶部设置为顶部：自动;
#side-nav .dropdown-menu {
top: auto;
}
https://jsbin.com/fukujazuko/
我的互联网在jsfiddle上遇到了一些问题
如果你不介意使用一点JQuery，我认为这可以解决问题：
$('.dropdown-menu').each(function() {
$(this).css('top', $(this).closest('li').css('top'));
});
您还需要更改 CSS 的一行：
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
//margin: -92px 0 0 100%; /* Removed */
margin: 0 0 0 100%; /* Added */
border-radius: 0;
}
在这里演示
使用以下 CSS 代码，子菜单显示在项目前面。
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -290px 0 0 100%;
border-radius: 0;
}
>我已将clearfix类添加到下拉菜单所在的li元素中。然后，这些属性要dropdown-menu
#side-nav .dropdown-menu {
...
top: auto;
float: right;
}
并添加了这个 css 规则：
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
这是包含更改的完整代码段。显示代码片段时，请单击"整页"以查看结果。
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: 0 0 0 100%;
border-radius: 0;
top: auto;
float: right;
}
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li class="clearfix"> <!-- ADDED THE CLEARFIX CLASS -->
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li><a href="">EXPIRATIONS</a></li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li><a href="/recruiting">RECRUITING</a></li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
</body>
</html>相关文章：
- 将同一个元素追加到两个下拉列表中只会导致最后一个元素被追加
- Jquery幻灯片中的列表，连接第一个和最后一个列表元素以创建旋转木马
- 默认情况下，在 angularjs 中选择下拉列表中的最后一个位置显示占位符
- jQuery:隐藏按钮，直到选择最后一个下拉列表
- 打开的模型框从列表中获取最后一个值
- 从下拉列表中选择最后一个值，然后对其他下拉列表禁用它
- 如何获取从下拉列表中选择的最后一个值并使用 jquery 禁用它
- Bootstrap 3.0:如何使垂直导航栏下拉列表不附加到最后一个列表项
- 我想在下拉列表的最后一个选项被选中时提交表单.选项是动态生成的
- 在最后一个位置的下一个位置插入列表元素
- 试图从无序列表中获取最后一个元素
- 如何添加一个类列表，并且只在JavaScript中显示最后一个类
- 如何使用JSON-LD标记面包屑列表中的最后一个非链接项
- 在循环功能后的最后一个列表项上停止
- 最后一个列表项未切换
- JQuery从每个列表行克隆最后一个元素
- 如何使用javascript/jquery检测最后一个或第一个列表项是否显示在其容器中
- 动态列表的最后一个按钮并不总是用jQuery触发点击事件
- 如何将下拉列表中的最后一个选项设置为使用D3.js选择
- 使用这个正则表达式，为什么它只捕获最后一个列表项?
