使用手風琴和標簽

Question

這個問題以前曾被提出過，但尚未解決。

我在同一頁面上使用了jQuery Tabs和Accordion，它們不能簡單地一起使用。 它們在單獨的頁面上分開工作，但是一旦它們在同一頁面上，這些選項卡就不會起作用。 實際上，當我重新加載頁面時，它會在哪個有效和哪個無效之間隨機切換。 我希望使用jquery在標簽內嵌套手風琴。

重新排序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 ，它似乎可以正常工作。 您是否可能剛剛輸入錯誤？

Answer 2

沒什么奇怪的 HTML中有<h3> ，而JS中的header: "h2"
將所有<h3>更改為<h2>或將header: "h2"更改為header: "h3" ，這樣就可以了