jQuery UI手風琴的HTML5標記

Question

我有以下標記，我想使用jQuery UI手風琴，但它不像我在HTML5之前製作的典型手風琴那樣呈現。我怎麼能通過使用文章/部分獲得手風琴？

<article> 
    <h1>Accordion</h1> 
    <div id="accordion"> 
     <section> 
      <h1><a href="#">Aliquam tincidunt mauris eu risus.</a></h1> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.</p> 
     </section> 
     <section> 
      <h1><a href="#">Integer vitae libero ac risus egestas placerat.</a></h1> 
      <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p> 
     </section> 
     <section> 
      <h1><a href="#">Fusce lobortis lorem at ipsum semper sagittis.</a></h1> 
      <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.</p> 
     </section> 
    </div> 
</article> 

在javascript中我使用：

$(document).ready(function(){ 
    $('#accordion').accordion();  
}); 

Answer 1

作爲一個側面說明，你會更好使用details and summary元素。

Answer 2

我們測試中的jsfiddle下面的代碼...

<div id="accordion"> 
    <article class="std_page_content"> 
    <a id="#test" href="#test" class="header"><h1>Aliquam tincidunt mauris eu risus</h1></a> 
    <section> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna.</p> 
     </section> 
    <a href="#test" class="header"><h1>Integer vitae libero ac risus egestas placerat.</h1></a> 
     <section> 
      <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p> 
     </section> 
     <a href="#test" class="header"><h1>Fusce lobortis lorem at ipsum semper sagittis.</h1></a> 
     <section> 
      <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus.</p> 
     </section> 
    </article> 
</div> 

和手風琴代碼 -

$("#accordion").accordion({header : "a.header", heightStyle : "content", 
    /*Allows full collapse*/collapsible: true, 
    /*collapses sections*/ active:false, 
    navigation:true 
}); 

我們的鏈接是 - http://jsfiddle.net/3tGYB/2/

你可以試試這個...