嵌套的<ul> </ul>上的jQuery UI Accordion“navigation：true”失败

Question

我正在使用jQuery UI构建一个Accordion菜单。但在我看来，navigation: true setter不适用于嵌套的<ul>代码。

navigation: true适用于Header A -> Link 1，Header B -> Link 2，但不适用于anything in subHeader under Header B (Link 3, Link 4)。

我是否可以知道我是否使用了错误的结构，以便Accordion无法正常运行？谢谢！

这是jQuery：

<script type="text/javascript">
$(document).ready(function() {
    $("#accordion").accordion({
        navigation: true,
        active: false,
        header: 'h3',
        collapsible: true
    });
});
</script>

这是HTML结构：

 

标题A

 

  
• ＆lt; a href =“＃”＆gt; Link 1＆lt; / a＆gt;
 

 

标题B

    

       
• ＆lt; a href =“＃”＆gt; Link 2＆lt; / a＆gt;
        
•       subHeader A             
                  
  •                     ＆lt; a href =“＃”＆gt;链接3＆lt; / a＆gt;                 
              
      subHeader B             
                  
  •                     ＆lt; a href =“＃”＆gt;链接4＆lt; / a＆gt;                 
              
          
   

<div id="accordion">
 <h3>Header A</h3>
 <ul>
  <li><a href="#">Link 1</a></li>
 </ul>

 <h3>Header B</h3>
    <ul>
        <li><a href="#">Link 2</a></li>
        <li>
         <h4>subHeader A</h4>
                <ul>
                    <li>
                        <a href="#">Link 3</a>
                    </li>
                </ul>
         <h4>subHeader B</h4>
                <ul>
                    <li>
                        <a href="#">Link 4</a>
                    </li>
                </ul>   
            </li>
       </ul>

</div>

Answer 1

也许这个问题/答案正是你要找的:) Nested accordion menu in jQuery