0

我正在尝试创建一个 3 级手风琴，加载所有父母都崩溃了。

事实证明，这非常具有挑战性。我看到了一些间距问题，高等教育的孩子们不会开学。

看看@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>
4

2 回答 2

1

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

$(function() {
  $( ".accordion" ).accordion({ active: false, collapsible: true, heightStyle : "content" })
});
于 2013-11-05T16:24:30.610 回答
1

不确定那个插件是做什么的，但你可以用 jQuery 做同样的事情。

$("a", ".accordion").on("click", function(e){
    e.preventDefault();
    $(this).parent("li").children("ul").first().slideToggle();
});

尝试这个。

我也交换了一些html。

编辑该链接是旧链接

http://jsfiddle.net/W67wM/3/

像这样的CSS

li > ul {
    display : none;
}
于 2013-11-05T16:24:42.960 回答