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

【问题标题】：How to programmatically open jquery accordion content panel如何以编程方式打开 jquery 手风琴内容面板
【发布时间】：2017-08-03 00:03:35
【问题描述】：

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

【问题讨论】：

同一内容面板中的下一个项目，还是下一个内容面板？
试试$(this).parent().next().toggle()或$(this).parent().next().show()
因为<h3> 是父级<div> 之后的下一个... $(this).parent().next('div').toggle()/show()
@AndrewPeacock .next() 不能那样工作。对于该功能，您需要.nextUntil("div").next("div")
@KevinB 嗯，不知道。谢谢！

标签： jquery

【解决方案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>

【讨论】：

在哪里？我看到的每个逗号都用于组合 var 语句。如果替换它们，maximum 和 next 将成为全局变量。
我使用的是 jQuery 1.10.3，必须将最后一行更改为：$accordion.accordion("option","active",next);
@GinjaNinja 喜欢吗？（您评论中的代码丢失/丢失。）感谢您指出！
我懒得看文档。如果这不在其中，它应该是。

【解决方案2】：

我的手风琴只有一个内容 div（0 索引），并且在回发时我正在注册脚本以在手风琴娱乐后再次打开手风琴 ($("#accordion").accordion({ collapsible: true, active: true });$("#accordion").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');

【讨论】：

【解决方案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>

【讨论】：