jquery - 如何在 jQuery 中单击按钮时触发 Accordion？

Question

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

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

您需要触发对话框小部件上的 Accordion 而不是原来的 <div>元素。您还需要显式指定标题栏作为 Accordion 标题:

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

您可以在 this fiddle 中测试它.

编辑: Accordion 可能不是将对话框折叠到其标题的最佳选择，特别是如果您只希望按钮触发效果的话。也许你可以只使用 slideToggle()相反:

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

更新了 fiddle here .