Javascript 多环节手风琴

我将这篇CSS技巧文章转换为UL>LI而不是DT>DD方法。我只想粉红色的框显示子链接时，点击

由于某种原因，虽然我不能让它工作。我在这里创建了一个JSFIDLE（单击粉色框）：

//手风琴
（函数（$）{
var allPanels=$（'ul.sub-level'）.hide（）；
$（'.click me'）。单击（函数（）{
allPanels.slideUp（）；
警报（“向上滑动”）；
//问题线
$（this.parent（）.next（）.slideDown（）；
返回false；
});
})（jQuery）
ul{列表样式：无；填充：0；边距：0；宽度：400px；}
ul li{位置：相对；背景：#fafafafa；边缘底部：3px；高度：20px；}
ul li>ul{左边距：30px；背景：#e3；}
.单击我{显示：块；宽度：20px；高度：20px；位置：绝对；顶部：0；右侧：0；背景：#e4f；光标：指针；}













您不需要使用父级。此外，还必须从
li
元素中删除固定高度：


//手风琴
（函数（$）{
var allPanels=$（'ul.sub-level'）.hide（）；
$（'.click me'）。单击（函数（）{
allPanels.slideUp（）；
//问题线
$（this.next（）.slideDown（）；
返回false；
});
})（jQuery）
ul{
列表样式：无；
填充：0；
保证金：0；
宽度：400px；
}
ulli{
位置：相对位置；
背景：#fafafa；
利润底部：3倍；
}
ul li>ul{
左边距：30px；
背景：#e3；
}
.点击我{
显示：块；
宽度：20px；
高度：20px；
位置：绝对位置；
排名：0；
右：0；
背景：#e4f；
光标：指针；
}




















您能详细说明一下预期和实际行为吗？当我运行此代码片段时，子级别下的项目不会向下移动。不确定这是StackOverflow事件还是代码事件。请再次检查我的带有注释的更新代码。因为你用的是固定高度。