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

发布于 2024-11-17 07:18:17 字数 505 浏览 2 评论 0原文

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

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});
});
});

原文

I want to trigger accordion when I click minimize button or to be more specific, when we click the minimize button the dialog’s content part gets hidden.

Html Code:

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

Script Code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如此安好 2024-11-24 07:18:18

您需要触发对话框小部件上的手风琴而不是原始的

元素。您还需要显式指定标题栏作为手风琴标题：

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

您可以在 this fiddle 中测试它。

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

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

更新的小提琴此处。

You need to trigger the accordion on the dialog widget instead of the original <div> element. You also need to explicitly specify the title bar as the accordion header:

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

You can test it in this fiddle.

EDIT: An accordion might not be the best choice to collapse a dialog to its title, especially if you only want the button to trigger the effect. Maybe you can just use slideToggle() instead: