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

Question

i使用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代码I中以这种方式激活选项卡和手风琴插件：

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

问题是第二个选项卡上的＃Accounion-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()，并且仅在此之后-INIT the .tabs()

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