在Bootstrap 3和jQuery中实现可折叠的选项卡式窗格

Question

以下是jsFiddle的完整代码示例。

我试图在Bootstrap 3 / jQuery中实现一个相当复杂的小部件，我正在努力找到解决它的正确方法。我想向用户展示以下可折叠导航菜单：

• Fizz Stuff
  • 转到火星
  • 吃披萨
• Buzz Stuff
  • 编辑小工具
  • 转到月亮
• Foo Stuff

在页面加载时，用户只能看到3个顶级菜单项（Fizz Stuff，Buzz Stuff和Foo Stuff）。只有当用户点击其中一个菜单项时，它才会扩展到任何现有的子菜单。如果他们再次单击主菜单，如果它已展开，它将折叠回其原始状态。任何选定的菜单项（顶级或其他）将作为选项卡式窗格中的当前选定选项卡。

因此，例如，在页面加载时，用户会看到：

然后，如果他们点击Buzz Stuff菜单项，他们会看到两个子菜单：编辑窗口小部件和转到月亮。如果他们点击编辑窗口小部件，他们会看到：

我还需要嵌套，以便子菜单可以有子菜单等子菜单;所有这些都有这种扩展/折叠和标签式窗格行为。

我实现这一目标的努力惨遭失败。正如您在jsFiddle中看到的，我的主要问题是构成每个选项卡内容的所有<div>标签在页面加载时显示，并且它们在导航菜单中显示 。相反，菜单的内容div应该可见的唯一时间是该菜单是否被单击/选中。选择另一个菜单后，该菜单/选项卡的内容窗格应该更改。

例如，点击：

<li><a href="#">Goto Mars</a></li>

只能告诉我们：

<div id="goto-mars-content">
    <h1>You are now on Mars.</h1>
</div>

所以有一些事情：

1. 是＆＃34;内容<div> s＆＃34;甚至最好的方法来处理这个？是否有更多Bootstrappy，其他一些小部件，如<ul>等？
2. 如何让所有内容在页面加载时不可见，并且只加载刚刚选中的菜单的内容？
3. 样式：如何在整个窗口小部件周围放置边框（即左侧导航菜单和选项卡式窗格内容）？

Answer 1

1. 在HTML中，您需要是语义的。通常用于导航，您希望使用 nav 标记。对于右侧内容， div 标记就可以了。
2. 要执行此操作，您需要使用bootstraps tabs。 Bootstrap有一篇很好的文章，里面写着代码。
3. 要在某些内容周围设置边框，您可以使用CSS border声明。

http://liveweave.com/3Sseg0

更新

回答评论 这是您的请求的生命编织。