javascript - 如何使用 bootstrap/jquery 折叠/展开列表

Question

我刚开始使用 twitter-bootstrap

在我的网站中，我想像这样切换包含文件夹内容的列表：单击<i class="icon-folder-open">它时应该切换到<i class="icon-folder-close">并且它应该隐藏项目 1 和项目 2

这是我的初始代码，它显示文件夹打开图标和该文件夹中的所有项目。

<a href="#"><i class="icon-folder-open"></i></a>&nbsp;Item in folder</li>
<ul>item 1</ul>
<ul>item 2</ul>

为了更清晰，我想添加屏幕截图，但找不到将其放在这里的方法。如果问题不清楚，请告诉我，我会尝试解释更多。

我知道可能有数百万种方法可以做到这一点。我正在寻找一些小而高效的东西，并且在 bootstrap/jQuery 领域内。

这是打开时的截图

http://i47.tinypic.com/2dj5ok6.png

当它关闭时

http://i49.tinypic.com/1dzlna.png

Answer 1

-编辑-

更新了 plunk 以反映 OP 提供的屏幕截图 -> plunk

---

操作，

http://plnkr.co/edit/2PUiNqdQKLsBVhyeKLtm?p=preview你想做什么？

用户单击按钮 -> 切换其他元素的开/关 -> 切换按钮的图标icon-folder-open/ icon-folder-close。

Answer 2

为了避免这个问题，我在 li 中使用了 p 元素的 line-height。所以带有自动高度的 li 给了我我需要的尺寸。