在jQuery選項卡中嵌套多個手風琴

我需要在頂部創建一個帶有3個選項卡的頁面，每個選項卡內部都帶有一個手風琴，但是我只能使它加載第一個手風琴，而其他手錶顯示爲未呈現。任何幫助，將不勝感激。在這個例子中，我確實看到手風琴應放在標籤之前，但那不適合我。在jQuery選項卡中嵌套多個手風琴

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

    <title>Details</title> 

    <!-- Website Styles --> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> 
    <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet"> 






    <style type="text/css"> 
    body { 
    background-color: #000000; 
} 
    </style> 

</head> 

<body> 

<div class="wrapper"> 
    <div class="one_half"> 
    </div> 


<div class="one_half last"> 
    <!-- Accordion --> 


    <h2 class="demoHeaders">Tabs</h2> 
     <div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First</a></li> 
     <li><a href="#tabs-2">Second</a></li> 
     <li><a href="#tabs-3">Third</a></li> 
    </ul> 
    <div id="tabs-1"><h2 class="demoHeaders">Accordion</h2> 
    <div id="accordion"> 
    <h3>First</h3> 
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
    <h3>Second</h3> 
    <div>Phasellus mattis tincidunt nibh.</div> 
    <h3>Third</h3> 
    <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div> 
    <div id="tabs-2"><div id="accordion"> 
    <h3>First</h3> 
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
    <h3>Second</h3> 
    <div>Phasellus mattis tincidunt nibh.</div> 
    <h3>Third</h3> 
    <div>Nam dui erat, auctor a, dignissim quis.</div></div> 
    <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 
</div> 


    </div> 
    </div> 





</div> 

     <!-- jQuery Scripts --> 
     <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/jquery-ui-1.10.3.custom.js"></script> 
    <script>$(function() { 

     $("#accordion").accordion(); 
       $("#tabs").tabs(); 
     }); 
     </script> 

</body> 
</html>

來源

2013-08-23 user2711818

你有ID accordion多個元素，它必須是唯一的，所以將其更改爲accordion1，accordion2和accordion3然後

$("#accordion1, #accordion2, #accordion3").accordion();

或代替id使用類屬性accordion然後

$('.accordion').accordion();

例如：

<div class="wrapper"> 
    <div class="one_half"> 
    </div> 
    <div class="one_half last"> 
     <!-- Accordion --> 
     <h2 class="demoHeaders">Tabs</h2> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">First</a></li> 
       <li><a href="#tabs-2">Second</a></li> 
       <li><a href="#tabs-3">Third</a></li> 
      </ul> 
      <div id="tabs-1"><h2 class="demoHeaders">Accordion</h2> 
       <div class="accordion"> 
        <h3>First</h3> 
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
        <h3>Second</h3> 
        <div>Phasellus mattis tincidunt nibh.</div> 
        <h3>Third</h3> 
        <div>Nam dui erat, auctor a, dignissim quis.</div> 
       </div> 
      </div> 
      <div id="tabs-2"><div class="accordion"> 
       <h3>First</h3> 
       <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
       <h3>Second</h3> 
       <div>Phasellus mattis tincidunt nibh.</div> 
       <h3>Third</h3> 
       <div>Nam dui erat, auctor a, dignissim quis.</div></div> 
       <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 
      </div> 
     </div> 
    </div> 

</div>

腳本

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

演示：Fiddle

來源

2013-08-23 17:05:10

在jQuery選項卡中嵌套多個手風琴

回答

相關問題