javascript - 使用折叠式和选项卡

Question

这个问题之前已经被问过，但没有解决。

我正在使用 jquery Tabs 和 Accordion，它们都在同一页面上，并且它们不能一起工作。 它们在各个页面上单独工作，但一旦它们位于同一页面上，选项卡将无法工作。 事实上，当我重新加载页面时，它会在哪个有效和哪个无效之间随机翻转。我希望使用 jquery 将 Accordion 嵌套在选项卡中。

重新排序 js 加载顺序似乎没有帮助，因为有些人很幸运，尽管我的直觉是它是加载顺序问题。

这是 html:

<div id="styleguide-tabs-demo-regular">
<ul>
<li><a href="#tabs-1">Tab One</a></li>
<li><a href="#tabs-2">Tab Two</a></li>
<li><a href="#tabs-3">Tab Three</a></li>
</ul>
<div id="tabs-1">Tab 1 content</div>
<div id="tabs-2">Tab 2 content</div>
<div id="tabs-3">Tab 3 content</div>
</div>
<p><br /><br /><br /><br /></p>
<div class="styleguide_demo_accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<div class="styleguide-section__accordion-demo-element">Content for Section 1</div>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<div class="styleguide-section__accordion-demo-element">Content for Section 2</div>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<div class="styleguide-section__accordion-demo-element">Content for Section 3</div>
</div>
</div>
<p>&nbsp;</p>

jquery:

$("div.styleguide_demo_accordion1").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false}) 

$("div#customaccordion").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false}) 

$(function() {
    $( "#tabs" ).tabs();
  });

$("div#styleguide-tabs-demo-regular").tabs();

任何帮助都会很棒!

Answer 1

我尝试了你的代码，创建了一个 JSFiddle我所需要改变的就是这一行:

$("div.styleguide_demo_accordion1").accordion({header: "h2", collapsible: true, heightStyle: "content", active: false}) 

至

$("div.styleguide_demo_accordion1").accordion({header: "h3", collapsible: true, heightStyle: "content", active: false}) 

基本上，在将 header 选项从 h2 更改为 h3 后，它似乎按预期工作。您是否可能刚刚输入错误？