0

ブログ用に折りたたみ可能な日付セレクターを作成しようとしています。私は大量の JavaScript/jquery/css の例を見てきましたが、3 レベルのリストでうまく機能するようには見えません。これは私が達成しようとしているレイアウトです:

>2012
  >July
    >title of muh new blag!

タグは次のとおりです。

<ul class="example_menu">
  <li><a class="expanded">Section A</a>
    <ul>
      <li><a href="#">Link A-A</a>
        <ul>
          <li><a href="#">Link A-A-A</a></li>
      <li><a href="#">Link A-A-B</a></li>
     </ul>
       </li>
       <li class="active"><a href="#">Link A-B</a></li>
       <li><a href="#">Link A-C</a></li>
       <li><a href="#">Link A-D</a></li>
    </ul>
  </li>
  <li class="footer"><span> </span></li>
  <li><a class="collapsed">Section B</a>
    <ul>
      <li><a href="#">Link B-A</a>
        <ul>
      <li><a href="#">Link B-A-A</a></li>
      <li><a href="#">Link B-A-B</a></li>
      <li><a href="#">Link B-A-C</a></li>
        </ul>
      </li>
      <li><a href="#">Link B-B</a>
        <ul>
      <li><a href="#">Link B-B-A</a></li>
      <li><a href="#">Link B-B-B</a></li>
        </ul>
      </li>
      <li><a href="#">Link B-C</a></li>
      <li><a href="#">Link B-D</a></li>
    </ul>
  </li>
  <li class="footer"><span> </span></li>
  <li><a class="collapsed">Section C</a>
    <ul>
      <li><a href="#">Link C-A</a></li>
      <li><a href="#">Link C-B</a></li>
      <li><a href="#">Link C-C</a></li>
      <li><a href="#">Link C-D</a></li>
    </ul>
  </li>
  <li class="footer"><span> </span></li>
</ul>

blogspot のブログ アーカイブと同じくらい簡単なことをしようとしています。（この男のページでそれをチェックしてください）

私が見つけてこれが一番気に入ったのはこれです。そして、余分なコードをたくさん取り除いた後、私はこれを見つけました:

$('.example_menu li > .expanded').show('ノーマル');

$('.example_menu li > a').click(関数() {

$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('ul').toggle('normal');

});

このリストは拡張および縮小され、次のような単純な 2 レベルのリストに最適です。

>Year
    >Month

ただし、3 レベルのリストでは、2 つの深いレベルを展開しながら折りたたむか、両方のレベルを展開します。すぐ下のリストを折りたたんで展開し、直接アクティブになるまで一番下のリストを折りたたんだままにしようとしています。

より単純なjqueryの折りたたみ可能なリストはありますか?

または、すぐに内部の ul 要素を取得して、それを切り替えながら、他のすべての内部の ul 要素を折りたたむ良い方法はありますか?

4

1 に答える 1

4

どうやら私はほとんどそこにいました。

//hide everything
$('.outline li > ul').hide();
//activate class "expanded"
$('.outline li > .expanded + ul').show('normal');
$('.outline li > a').click(function() {
//hide everything
$(this).find('ul').hide();
//toggle next ul
$(this).toggleClass('expanded').toggleClass('collapsed').next('ul').toggle('normal');
});
于 2012-07-10T17:55:53.037 に答える