如何以编程方式打开jQuery手风琴内容面板 [英] How to programmatically open jquery accordion content panel

问题描述

我想扩展jQuery手风琴的默认行为，并在内容面板中添加一个NEXT按钮.当用户单击内容面板中的NEXT按钮时，手风琴应打开下一个项目.

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.

我能够找到类似$(this).parent().next()的下一个项目，但无法触发实际操作.

I was able to locate the next item like this $(this).parent().next() but having trouble triggering the actual action.

<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>

推荐答案

如果这是jQuery UI Accordion小部件，则应使用它的内置方法.

If this is the jQuery UI Accordion widget, you should be using it's built-in methods.

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>

这篇关于如何以编程方式打开jQuery手风琴内容面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！