0

すべての親が折りたたまれた状態でロードされる 3 レベルのアコーディオンを作成しようとしています。

これは非常に困難であることが証明されています。スペーシングの問題が発生しており、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 に答える