如何以编程方式打开 jquery 手风琴内容面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11041420/
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
How to programmatically open jquery accordion content panel
提问by Registered User
I want to extend the default behavior of the jquery accordion and add a NEXT button inside the content panels. When the user clicks NEXT button inside the content panel, the accordion should open the next item.
我想扩展 jquery 手风琴的默认行为并在内容面板内添加一个 NEXT 按钮。当用户单击内容面板内的 NEXT 按钮时，手风琴应打开下一个项目。
I was able to locate the next item like this $(this).parent().next()but having trouble triggering the actual action.
我能够像这样找到下一个项目，$(this).parent().next()但无法触发实际操作。
<div id="accordion">
<h3><a href="#">Item 1</a></h3>
<div>Item 1 content<br />
<div onclick="$(this).parent().next().show();">NEXT</div>
</div>
<h3><a href="#">Item 2</a></h3>
<div>Item 2 content<br />
</div>
</div>
回答by Kevin B
If this is the jQuery UI Accordion widget, you should be using it's built-in methods.
如果这是 jQuery UI Accordion 小部件，您应该使用它的内置方法。
var $accordion = $("#accordion").accordion();
function openNextAccordionPanel() {
var current = $accordion.accordion("option","active"),
maximum = $accordion.find("h3").length,
next = current+1 === maximum ? 0 : current+1;
// $accordion.accordion("activate",next); // pre jQuery UI 1.10
$accordion.accordion("option","active",next);
}
html:
html：
<div onclick="openNextAccordionPanel();">NEXT</div>
回答by user3895976
My accordion has only one content div (0 index) and on postback I'm registering the script to open again the accordion after it's recreation ($("#accordion").accordion({ collapsible: true, active: true });$("#accordion").show();) to position layout where the user was before triggered the postback.
我的手风琴只有一个内容 div（0 索引），并且在回发时我正在注册脚本以在重新创建后再次打开手风琴 ($("#accordion").accordion({ collapsible: true, active: true }); $("#accordion").show();) 将布局定位在用户触发回发之前的位置。
HTML:
HTML：
<div id="accordion" style="display: none">
<h3>ACCORDION TITLE</h3>
<div class="col-lg-12" style="overflow: hidden">
Javascript function:
Javascript函数：
$("#accordion").accordion({ active: 0 });
$('.ui-accordion-content').css('height', 'auto');
回答by Bellash
To have you code working perfectly, you should modify your html as follows
为了让您的代码完美运行，您应该按如下方式修改您的 html
<div id="accordion">
<h3><a href="#">Item 1</a></h3>
<div class='showable'>Item 1 content<br />
<div onclick="$(this).parent('.showable').hide().next().show();">NEXT</div>
</div>
<h3><a href="#">Item 2</a></h3>
<div class='showable'>Item 2 content<br />
</div>
</div>
