jQuery - 手风琴盒

Question

我在窗体上有一系列框/内容块，只需显示框的标题，在其下方有一个“查看更多”按钮。当用户点击查看更多时，该框应该垂直展开以显示其内容。另外，如果点击另一个“查看更多”，则需要关闭其他任何打开的框。

我该如何使用jQuery来完成这项工作？我想也许我可以使用手风琴插件，但这听起来像只适用于列表显示。

例子：

框标题
查看更多！

*用户点击

框标题

• 内容
• 内容
• 内容
• 内容

关闭

Answer 1

的jQuery UI Accordion plugin不依赖于列表，你可以使用类似这样的标记：

<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div> 

Answer 2

http://jqueryui.com/demos/accordion/看主题化标签，它不使用名单。