jquery - jQuery を使用してアイテムごとの展開リストを作成するにはどうすればよいですか? (例を提供)

Question

この Web サイトのメニュー ナビゲーションを再作成しようとしています。

http://www.irb-paris.eu/

(たとえば、'Projects' をクリックすると、単語の行が 1 つずつ表示されます)。

私のウェブサイト ( http://shinjipons.com/test/index.html ) では、同じ効果を達成しようとしています。jQueryでslideToggle()を使用し、jQueryUIでtoggle()をスライド方向を右に使用してみましたが、順序付けられていないリスト全体をブロックとして切り替えます。

誰でもこの問題に光を当てることができますか? ありがとうございました。

Answer 1

同様のソリューション (@Imperative から分岐) を次に示しますが、メニュー リンクからロールアウトするコンテキストでは次のようになります。

http://jsfiddle.net/kE3XW/11/

$(function() {

    $('#menu li').children('a').click(function() {
        $(this).next('ul').children('li').each(function(index) {
            var menuItem = $(this);
            window.setTimeout(function() {
                menuItem.fadeIn();
            }, 100 * index);
        });
    });

});

そして、CSS を使用してサブメニュー項目を非表示にしてください:

ul ul li { display: none; }