Javascript jQuery UI 可折叠面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5812955/
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
jQuery UI collapsible panel
提问by stewart715
I notice on the jQuery UI theme roller website (left side), they have collapsible panels to group customization options for a custom jQuery UI package.
我在 jQuery UI 主题滚轮网站（左侧）上注意到，它们有可折叠的面板来对自定义 jQuery UI 包的自定义选项进行分组。
However, I don't see that collapsible panel anywhere in jQuery UI (seems odd to me!)
但是，我在 jQuery UI 中的任何地方都没有看到可折叠面板（对我来说似乎很奇怪！）
Does anyone know any collapsible panel options for jQuery like work like that (with the arrow and all)?
有没有人知道像这样的工作的 jQuery 的任何可折叠面板选项（带箭头和所有）？
采纳答案by Andrew Whitaker
I think you're looking for accordion:
我想你正在寻找手风琴：
http://jqueryui.com/demos/accordion/
http://jqueryui.com/demos/accordion/
However, if you want multiple sections open, check out this part of the accordion documentation (overview):
但是，如果您想打开多个部分，请查看手风琴文档的这一部分（概述）：
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
});
Or animated:
或动画：
jQuery(document).ready(function(){
$('.accordion .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
});
回答by Chris Rogers
You do not need JQuery UI for this. Just straight old Jquery. They are often known as collaspable divs.
为此，您不需要 JQuery UI。只是直接的旧 Jquery。它们通常被称为可折叠 div。
Attach a click event to the 'header' divs, which slides down/up the associated content div. To get the open/closed images, toggle a css class on the header to change image.
将点击事件附加到“标题”div，它可以向下/向上滑动关联的内容 div。要获取打开/关闭的图像，请在标题上切换 css 类以更改图像。
回答by paparush
You are referring to the Accordion class. Here's how I use it PHP:
您指的是手风琴类。这是我如何使用它 PHP：
echo "<div class='accordion'>";
echo "<H2>Event Details</H2>";
echo "<p>". $row['eNotes']. "</p>";
echo "</div>";
Here's my bit of jQuery:
这是我的一点 jQuery：
$(document).ready(
function()
{
// ACCORDIAN
$(".accordion H2:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h2").click(function(){
$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("H2").removeClass("active");
});
}
);
