在 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();