我有一个水平列表(显示:内联 block ),当您切换嵌套列表以展开它时,它会拉动所有其他 <li>
在列表中。
这是我的 Demo .
显然我知道它可以像 this demo 那样工作因为主列表没有显示内联。但我需要它是内联的。如果有人知道如何让它工作,我将不胜感激。我已经尝试寻找答案并尝试使用代码,但我没有任何运气。
提前致谢。
CSS:
#sidebar-wrapper {
width: 280px;
height: auto;
float: left;
position: relative;
}
#sidebar-left {
width: 280px;
height: auto;
font-size: 14px;
background: #ff8000;
border-right: 10px solid #333;
}
#sidebar-left li {
list-style: none;
}
.submenu-ebene1 {
background: #ff8000;
border-bottom: 1px solid #222;
font-size: 1em;
font-weight: normal;
cursor: pointer;
display: block;
}
.last.closed {
border-bottom: none;
}
.submenu-ebene2 {
font-size: 1em;
font-weight: normal;
background: #222;
color: #ccc;
}
.submenu-ebene3 {
font-size: 0.9em;
font-weight: normal;
margin-left: 0px;
cursor: pointer;
background: #222;
color: #ccc;
}
.submenu-ebene3 li {
padding-left: 30px;
}
.link, .single-link {
border-bottom: 1px dotted #222;
padding: 10px;
}
.link.last, .single-link.last {
border-bottom: none;
margin-bottom: 10px;
}
.active {
background: #333;
color: #ccc;
}
.inactive {
color: #333;
-o-transition:.2s linear;
-ms-transition:.2s linear;
-moz-transition:.2s linear;
-webkit-transition:.2s linear;
}
.inactive:hover {
background: #333;
color: #ccc;
}
.submenu-ebene2 {
display: none;
}
.submenu-ebene3 {
display: none;
}
最佳答案
将 z-index 添加到您的嵌套元素:
.submenu-ebene2 {
display: none;
position:absolute;
z-index:1000;
}
.submenu-ebene3 {
display: none;
position:absolute;
z-index:1000;
}
您的列表会扩展,因为它们嵌套在 <li>
中元素。
这行得通!祝你好运http://jsfiddle.net/pLv77/45/
关于jquery - 如何使用 jQuery slideToggle 扩展内联列表中的嵌套列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33549768/