Javascript Jquery嵌套的Accordion仅显示一个级别

假设我有以下结构：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <ul>
           <li>Item11</li>
           <li>Item12</li>
           <li>Item13</li>
        </ul>
    </li>

当我点击+时，列表变为

Item 3 -

  Item 11

  Item 12

  Item 13

因此，父列表消失，子列表显示。 如果单击-，则所有内容都返回到上一个列表

有一些jquery插件可以做这件事吗

也许，手风琴的一些选择

---

提前感谢。

使用Dkouk他的版本创建您需要的内容

编辑1：隐藏其他菜单项 编辑2：第二级菜单

$（函数（）{
$（'ul li'）。每个（函数（）{
if（$（this.find（'ul'）。长度>0）{
$（this.addClass（'child'）；
}
});
$（'ul li.child span'）。单击（函数（）{
$（this）.parent（）.toggleClass（'open'）.find（'ul'）.first（）.slideToggle（）；
$（this.parent（）.sides（）.slideToggle（）；
});
});
ul{
列表样式：无；
}
ul li.child span:之后{
内容：“+”；
}
ul li.child.open span:之后{
内容：“-”；
}
li ul{显示：无；}





项目3



项目2









当一个类具有子列表时，您可以将其添加到列表中，并切换列表和列表父级的另一个类，以便将“+”更改为“-”

您可以选择多个级别，代码也可以工作，
我已经在列表中添加了一个span have child，但是只能在文本中触发click，如果您触发click for LI列表并打开子列表，那么将再次关闭

您可以设置内容的样式。
这里有一个简单的例子：


$（函数（）{
$（'ul li'）。每个（函数（）{
if（$（this.find（'ul'）。长度>0）{
$（this.addClass（'child'）；
}
});
$（'ul li.child span'）。单击（函数（）{
$（this）.toggleClass（'open'）.parent（）.find（'ul:first'）.slideToggle（）；
$（this.parent（）.sides（）.slideToggle（）；
});
});
ul{
列表样式：无；
}
ul li.child span:之后{
内容：“+”；
}
ul li.儿童期开放：之后{
内容：“-”；
}
ul li ul{显示：无；}





项目3




项目3







您只是想继续创建静态内容的更深层次的子树，还是想用某种有意义的信息填充这些子树？内容是静态的。我已经有这个ul列表了。很简单，不要嵌套它们。打开项目3时，根据隐藏第一个项目并显示下一个项目。根据此代码段，单击plus时，项目2可见。您可以使其单击，也可以使项目3单击并滑动切换其中的ul子项。如果你想，我可以更改代码使其点击，如果你不知道如何操作，你能标记答案吗，我现在就更改代码。你能给我解释一下吗，这样我就可以确切地知道你想要什么。@Andrewount，你能现在检查新代码吗，它应该按照你的预期工作。这不起作用。当我单击第3项时，第1项和第2项应该消失。我认为这应该可以满足您的所有需要。：）请删除'-1'：（您需要直观地看到'-'和'+'吗？我添加了第二个级别。我认为这是这个菜单结构所能达到的最高水平（span在主ul中保持可见）。希望这对您有所帮助。我不需要显示所有的父项，只需要先显示。它没有按预期工作。当我单击“项目3”和“项目2”时，它应该显示有子项的项目2，但不显示项目2的父项，即项目3。
Item 3 -

  Item 11

  Item 12

  Item 13