jQuery でシンプルなトグルメニューを作る方法

jQuery でトグルメニューを作る

メニュー項目をクリックすると一階層下にあるサブメニューが上下にスライドするトグルメニューを jQuery で作ります。

＜サンプル＞

まずはサンプルを見てください。青色文字の項目をクリックするとその項目の下の階層にあるサブメニューがスライドして出現します。そして、サブメニューが展開された状態で、もう一度青色文字の項目をクリックすると今度は展開されたサブメニューが収納されます。

親項目１

• 子項目１－１
• 孫項目１－１－１
• 孫項目１－１－２
• 孫項目１－１－３
• 子項目１－２
• 孫項目１－２－１
• 孫項目１－２－２
• 孫項目１－２－３
• ひ孫項目１－２－３－１
• ひ孫項目１－２－３－２
• ひ孫項目１－２－３－３
• 子項目１－３
• 孫項目１－３－１
• 孫項目１－３－２
• 孫項目１－３－３

親項目２

• 子項目２－１
• 孫項目２－１－１
• 孫項目２－１－２
• 孫項目２－１－３
• 子項目２－２
• 孫項目２－２－１
• 孫項目２－２－２
• 孫項目２－２－３
• 子項目２－３
• 孫項目２－３－１
• 孫項目２－３－２
• 孫項目２－３－３

※この記事では、メニュー項目をクリックするとその項目のサブメニューがスライド表示される方法を有料（200円）でご紹介しています。

この続きはcodocで購入