如何使用 bootstrap/jquery 折叠/展开列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15391325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to collapse/expand list using bootstrap/jquery
提问by Watt
I just started working with twitter-bootstrap
我刚开始使用 twitter-bootstrap
In my website, I want to toggle a list containing folder's content like this:
when clicked on <i class="icon-folder-open">it should toggle to <i class="icon-folder-close">and it should hideitem 1 and item 2
在我的网站中，我想像这样切换一个包含文件夹内容的列表：点击<i class="icon-folder-open">它时应该切换到<i class="icon-folder-close">并且它应该隐藏第1 项和第 2 项
Here is my initial code which shows folder-open icon and all items in that folder.
这是我的初始代码，它显示文件夹打开图标和该文件夹中的所有项目。
<a href="#"><i class="icon-folder-open"></i></a> Item in folder</li>
<ul>item 1</ul>
<ul>item 2</ul>
I want to add screenshot for more clarity, but cannot find a way to put it here. Let me know if question is not clear, I will try to explain more.
我想添加屏幕截图以提高清晰度，但找不到将其放在这里的方法。如果问题不清楚，请告诉我，我会尝试解释更多。
I know there could be millions of way to do it. I am looking for something small and efficient and within bootstrap/jQuery realm.
我知道可能有数百万种方法可以做到这一点。我正在寻找一些小而高效且在 bootstrap/jQuery 领域内的东西。
Here is screenshot when it is open
这是打开时的截图
http://i47.tinypic.com/2dj5ok6.png
http://i47.tinypic.com/2dj5ok6.png
And when it is closed
当它关闭时
回答by couzzi
-Edit-
-编辑-
Updated plunk to reflect OP's provided screen-shots -> plunk
更新了 plunk 以反映 OP 提供的屏幕截图 -> plunk
OP,
操作，
Is http://plnkr.co/edit/2PUiNqdQKLsBVhyeKLtm?p=previewwhat you're looking to do?
是http://plnkr.co/edit/2PUiNqdQKLsBVhyeKLtm?p=preview你打算做什么？
User clicks button -> toggles other element on/off -> toggle the button's icon icon-folder-open/ icon-folder-close.
用户单击按钮 -> 打开/关闭其他元素 -> 切换按钮的图标icon-folder-open/ icon-folder-close。
回答by Roman Bambycha
To avoid this issue I have used line-height for p element in li. So li with auto height give me size that I need.
为了避免这个问题，我对 li 中的 p 元素使用了 line-height。所以具有自动高度的 li 给了我我需要的尺寸。
