我想扩展jquery手风琴的默认行为,并在内容面板中添加一个NEXT按钮。当用户单击内容面板中的NEXT按钮时,手风琴应该打开下一个项目。
我能够找到像$(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>
答案 0 :(得分:30)
如果这是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:
<div onclick="openNextAccordionPanel();">NEXT</div>
答案 1 :(得分:1)
我的手风琴只有一个内容div(0索引),并且在回发后我注册了脚本,以便在手风琴重新播放后重新打开手风琴($(&#34; #cordion&#34;) .accordion({collapsible:true,active:true}); $(&#34;#accordion&#34;)。show();)定位用户在触发回发之前的布局。
HTML:
<div id="accordion" style="display: none">
<h3>ACCORDION TITLE</h3>
<div class="col-lg-12" style="overflow: hidden">
Javascript功能:
$("#accordion").accordion({ active: 0 });
$('.ui-accordion-content').css('height', 'auto');
答案 2 :(得分:0)
为了让你的代码完美运行,你应该修改你的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>