在jquery选项卡中激活jquery手风琴

Question

我使用jquery tabs插件来创建多个选项卡的元素。每个标签都有一个手风琴（jquery手风琴插件）。

<div id="tabs" class="faq-tabs">
<ul>
    <li><a href="#tabs-1">1</a></li>
    <li><a href="#tabs-2">2</a></li>
</ul>
<div id="tabs-1">
    <div id="accordion-1" class="accordion a-faq">
        <h3>Title 1</h3>
        <div>Block1</div>

        <h3>Titl2</h3>
        <div>Block2</div>
    </div>
</div>
<div id="tabs-2">
    <div id="accordion-2" class="accordion a-faq">
        <h3>Title 1</h3>
        <div>Block1</div>

        <h3>Titl2</h3>
        <div>Block2</div>
    </div>
</div>

在js代码中，我以这种方式激活制表符和手风琴插件：

$(function() {
    $( "#tabs" ).tabs();
    $( "#accordion-1,#accordion-2" ).accordion();
});

问题是第二个标签上的＃accordion-2不起作用。似乎绑定手风琴插件的js代码不正确。

请问有什么建议吗？感谢。

Answer 1

以下是一个基于代码的工作示例。

检查控制台中是否有任何javascript错误，因为它应该可以正常工作。

$(function() {
  $( "#accordion-1,#accordion-2" ).accordion();
  $( "#tabs" ).tabs();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="tabs" class="faq-tabs">
  <ul>
    <li><a href="#tabs-1">1</a></li>
    <li><a href="#tabs-2">2</a></li>
  </ul>
  <div id="tabs-1">
    <div id="accordion-1" class="accordion a-faq">
      <h3>accordion-1 Title 1</h3>
      <div>Block1</div>

      <h3>accordion-1 Titl2</h3>
      <div>Block2</div>
    </div>
  </div>
  <div id="tabs-2">
    <div id="accordion-2" class="accordion a-faq">
      <h3>accordion-2 Title 1</h3>
      <div>Block1</div>

      <h3>accordion-2 Titl2</h3>
      <div>Block2</div>
    </div>
  </div>
</div>

更新

为了确保内部手风琴能够在不同的标签内工作，您需要首先确保初始化.accordion()并且仅在此之后 - 初始化.tabs()

$( "#accordion-1,#accordion-2" ).accordion();
$( "#tabs" ).tabs();