javascript - 如何创建一个在关闭状态下加载的 3 层 Accordion ？

Question

我正在尝试创建一个 3 级 Accordion ，可以加载所有折叠的 parent 。

事实证明，这非常具有挑战性。我发现一些间距问题，第三个 child 无法打开。

看看@http://jsfiddle.net/abenjamin/W67wM/2/

任何帮助将不胜感激。

脚本

 <script>
  $(function() {
    $( ".accordion" ).accordion({ active: false, collapsible: true });
  });
  </script>

html

 <ul class="accordion">
  <li><a class="head" href="#">1</a>

      <ul class="accordion main">
      <li><a href="#">1 - 1</a>

        <ul class="accordion sub">
          <li><a href="#">1 - 1 - 1</a></li>
          <li><a href="#">1 - 1 - 2</a></li>
          <li><a href="#">1 - 1 - 3</a></li>
        </ul>


      </li>
      <li><a href="#">1 - 2</a>

        <ul class="accordion sub">
          <li><a href="#">1 - 2 - 1</a></li>
          <li><a href="#">1 - 2 - 2</a></li>
          <li><a href="#">1 - 2 - 3</a></li>
        </ul>

      </li>
      <li><a href="#">1 - 3</a>
        <ul class="accordion sub">
          <li><a href="#">1 - 3 - 1</a></li>
          <li><a href="#">1 - 3 - 2</a></li>
          <li><a href="#">1 - 3 - 3</a></li>
        </ul>
      </li>
    </ul>
  </li>


 <li><a class="head" href="#">2</a>

      <ul class="accordion main">
      <li><a href="#">2 - 1</a>

        <ul class="accordion sub">
          <li><a href="#">2 - 1 - 1</a></li>
          <li><a href="#">2 - 1 - 2</a></li>
          <li><a href="#">2 - 1 - 3</a></li>
        </ul>      

      </li>
      <li><a href="#">2 - 2</a>

        <ul class="accordion sub">
          <li><a href="#">2 - 2 - 1</a></li>
          <li><a href="#">2 - 2 - 2</a></li>
          <li><a href="#">2 - 2 - 3</a></li>
        </ul>      

      </li>
      <li><a href="#">2 - 3</a>
        <ul class="accordion sub">
          <li><a href="#">2 - 3 - 1</a></li>
          <li><a href="#">2 - 3 - 2</a></li>
          <li><a href="#">2 - 3 - 3</a></li>
        </ul>      
      </li>
    </ul>
  </li>


</ul>

Answer 1

我将选项 heightStyle : "content" 添加到 Accordion 构造函数中。我在一个简单的 fiddle 和你的 fiddle 中添加了这个，两者似乎都工作得很好:http://jsfiddle.net/STSfB/

$(function() {
  $( ".accordion" ).accordion({ active: false, collapsible: true, heightStyle : "content" })
});