jquery - 如何使用 jQuery slideToggle 扩展内联列表中的嵌套列表？

Question

我有一个水平列表(显示:内联 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;   
}

Answer 1

将 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/