如何在点击 jQuery 中的按钮时触发 Accordion？

Question

我想在单击最小化按钮时触发手风琴，或者更具体地说，当我们单击最小化按钮时，对话框的内容部分会被隐藏。

HTML代码：

<div id="dialog" title="Title">
<div>
<p>Some Content</p>
</div>
</div>
<button>Minimize</button>

脚本代码：

$(function (){
$("#dialog").dialog();
$("button").button({icons:{primary: "ui-icon-minus"},text: false}).insertBefore('.ui-dialog-titlebar-close').click(function(){ 
$("#dialog").accordion({collapsible: true});
});
});

Answer 1

您需要在对话框小部件上触发手风琴，而不是原来的<div> 元素。您还需要明确指定标题栏作为手风琴标题：

$("#dialog").dialog("widget").accordion({
    collapsible: true,
    header: "> .ui-dialog-titlebar"
});

您可以在this fiddle 进行测试。

编辑：手风琴可能不是将对话框折叠到其标题的最佳选择，特别是如果您只希望按钮触发效果。也许您可以改用slideToggle()：

$("#dialog").slideToggle("fast");

更新小提琴here。