Question

我想扩展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>

Answer 1

如果这是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>

Answer 2

我的手风琴只有一个内容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');

Answer 3

为了让你的代码完美运行，你应该修改你的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>

如何以编程方式打开jquery手风琴内容面板

3 个答案: