[jQuery]スマホ対応多階層対応アコーディオンメニュー

前の記事に比べてスマートなのができた
これは嬉しい

こうする

装飾については割愛
jQueryはこれで動いてるけど他のバージョンでも多分ける(未確認)。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav>
    <ul>
        <li><a>めにゅー</a></li>
        <li><a>めにゅー</a></li>
        <li><span>めにゅー</span>
            <ul>
                <li><a>子めにゅー</a></li>
                <li><a>子めにゅー</a></li>
                <li><span>子めにゅー</span>
                    <ul>
                        <li><a>孫メニュー</a></li>
                        <li><a>孫メニュー</a></li>
                        <li><a>孫メニュー</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span>めにゅー</span>
            <ul>
                <li><a>子めにゅー</a></li>
                <li><span>子めにゅー</span>
                    <ul>
                        <li><a>孫メニュー</a></li>
                        <li><a>孫メニュー</a></li>
                        <li><a>孫メニュー</a></li>
                    </ul>
                </li>
                <li><span>子めにゅー</span>
                    <ul>
                        <li><a>孫メニュー</a></li>
                        <li><a>孫メニュー</a></li>
                        <li><a>孫メニュー</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>
nav ul ul{ display:none;}
$(function(){
$('nav span').on('click', function(){
$(this).siblings('ul').slideToggle();
$(this).toggleClass('active');
});
});

一応クリック時のclass振り分けもつけてる。

解説

html

低階層表示非表示部分はspanでやってる。
都合により別のにしてもいいけどaだけは無い。
上記サンプルは孫までだけどもっと先まで行ける。

css

格納するためにcssで低階層のulを非表示。

js

「クリックしたspanと同梱・同階層のulを表示・非表示する」っていう仕組み。
トリガーとして低階層開いてるかどうかの区別がないと辛いので、classを振るようにしてる。

前回との比較

階層別トリガーにそれぞれjsを書いてたけど統一できた。
jsについて素人だからね、見返すと成長が分かって嬉しいね。

コメント

  1. […] いつだったかに書いた記事から更にグレードアップした感じ。 ネックは、トリガーがaタグでいけるところ。 […]

タイトルとURLをコピーしました