Html 三级手风琴无法打开css

我正在制作一个手风琴三级菜单。除了我在本网站和其他网站上的博客上读到的内容以及从现有手风琴中复制的内容外，我对写这篇文章一无所知

我成功地制作了一个两级手风琴，但我无法在我们的sharepoint网站上发布两个单独的两级手风琴-它们相互抵消，无法打开

所以我把它们结合起来，制作了一个三层的手风琴，但我无法打开第三层。为了简化，我减少了html中的信息量，并删除了敏感链接

有人能帮忙吗

$（文档）.ready（函数（）{
$（“#导航>li>a”）。在（“单击”上，函数（e）{
如果（$（this.parent（）.has（“ul”））{
e、 预防默认值（）；
}
if（！$（this）.hasClass（“打开”））{
//隐藏所有打开的菜单并删除所有其他类
美元（350美元）；
$（“#nav li a”）.removeClass（“开放”）；
//打开我们的新菜单并添加开放类
$（this.next（“ul”）。向下滑动（350）；
$（此）.addClass（“打开”）；
}
else if（$（this）.hasClass（“打开”））{
$（此）.removeClass（“打开”）；
$（本）.next（“ul”）.slideUp（350）；
}
});
});
ol，ul，li{
填充：0；
}
菜单，导航，部分{显示：块；}
ol，ul{列表样式：无；}
blockquote，q{quotes:none；}
blockquote:before，blockquote:after，q:before，q:after{content:''；content:none；}
强{字体大小：粗体；}
表{边框折叠：折叠；边框间距：0；}
h1{字体系列：'Merienda'，'Trebuchet MS'，Verdana，无衬线；字体大小：2.95em；线条高度：1.7em；页边距底部：20px；字体重量：粗体；字母间距：-0.03em；颜色：#675d90；文本阴影：2px 2px 0px rgba（255255,0.65）；文本对齐：中心；}
#w{显示：块；宽度：740px；边距：0自动；顶部填充：45px；}
/*导航菜单样式*/
#导航{
显示：块；
宽度：280px；
保证金：0自动；
-网络工具包盒阴影：3px2p3pRGBA（0,0,0,0.7）；
-莫兹盒阴影：3px2p3pRGBA（0,0,0,0.7）；
盒影：3px2p3pRGBA（0,0,0,0.7）；
}
#nav li{}
#nav>li>a{
显示：块；
填充：16px 18px；
字体大小：1.3em；
字体大小：粗体；
颜色：#D4；
文字装饰：无；
边框底部：1px实心#212121；
背景色：#3434；
背景：-webkit渐变（线性、左上、左下、从（#214c7c）到（#284e7a））；
背景：-webkit线性梯度（顶部，214c7c，284e7a）；
背景：-莫兹线性梯度（顶部，214c7c，284e7a）；
背景：-ms线性梯度（顶部，214c7c，284e7a）；
背景：-o-线性梯度（顶部，#214c7c，#284e7a）；
背景：线性梯度（顶部，#214c7c，#284e7a）；
}
#nav>li>a：悬停，#nav>li>a.open{
颜色：#e9e9e9；
边框底色：#384f76；
背景色：#6985b5；
背景：-webkit渐变（线性、左上、左下、从（#6985b5）到（#456397））；
背景：-webkit线性梯度（顶部，#6985b5，#456397）；
背景：-莫兹线性梯度（顶部，#6985b5，#456397）；
背景：-ms线性梯度（顶部，#6985b5，#456397）；
背景：-o-线性梯度（顶部，#6985b5，#456397）；
背景：线性梯度（顶部，#6985b5，#456397）；
}
#导航li ul{显示：无；背景：#4a5b78；}
#nav li ul li a{
显示：块；
背景：无；
填充：10px 0px；
左侧填充：30px；
字体大小：1.1米；
文字装饰：无；
字体大小：粗体；
颜色：#e3e7f1；
文本阴影：1px 1px 0px#000；
}
#导航李：悬停{
背景#394963；
}

这里有一个简单的jquery 3级手风琴：

还有一个纯css多级手风琴：

另外，关于您的代码，我看到了两个问题：html代码没有验证，javascript只应用于转换为第一级链接的$（“#nav>li>a”）。

---

我希望这有帮助，我做得相当快。但您可以只为每个属性分配一个属性

$（'.header'）。单击（函数（）{
var accordId=$（this.attr（'accordId'）；
$（'.content'）.slideUp（）；
$（'.content[accordID=“'+accordID+'“]”）slideToggle（）；
})

.wrapper{
宽度：200px；
高度：自动；
浮动：左；
背景：#ebebeb；
边框：1px实心#d9d9d9；
}
.标题{
填充：10px；
背景:#666；
颜色：#fff；
}
.内容{
显示：无；
}

标题
内容
标题2
内容2
标题3
内容3

感谢您的快速回复！我来看看html。欢迎，祝你好运！下面是第二个解决方案的代码：