jQuery で作る多階層ツリーメニュー

投稿日: 2011年4月30日 作成者: alphasis

多階層のツリーメニューは、jQuery で簡単に作れる。トップ階層のメニュー横の▼をクリックすると、第2階層のサブメニューが現れる。トップ階層のメニュー横の▼を再びクリックすると、第2階層のサブメニューが折りたたまれる。第2階層のサブメニュー横の▼をクリックすると、第3階層のサブメニューが現れる。第3階層以下についても同様。

実装例

実装例の動作について

  1. メニュー1の横の▼をクリックすると、メニュー1のサブメニューが現れる。
  2. メニュー1-1の横の▼をクリックすると、メニュー1-1のサブメニューが現れる。
  3. メニュー1-1-1の横の▼をクリックすると、メニュー1-1-1のサブメニューが現れる。
  4. メニュー1の横の▼を再びクリックすると、メニュー1のサブメニューが折りたたまれる。

ソースコード

JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$( function() {
    $( '#jquery-menu-1-triangle' ) . click( function() {
        $( "#jquery-menu-1-sub" ) . slideToggle( 'slow' );
    } );
    $( '#jquery-menu-1-1-triangle' ) . click( function() {
        $( "#jquery-menu-1-1-sub" ) . slideToggle( 'slow' );
    } );
    $( '#jquery-menu-1-1-1-triangle' ) . click( function() {
        $( "#jquery-menu-1-1-1-sub" ) . slideToggle( 'slow' );
    } );
    $( '#jquery-menu-1-2-triangle' ) . click( function() {
        $( "#jquery-menu-1-2-sub" ) . slideToggle( 'slow' );
    } );
    $( '#jquery-menu-2-triangle' ) . click( function() {
        $( "#jquery-menu-2-sub" ) . slideToggle( 'slow' );
    } );
    $( '#jquery-menu-2-2-triangle' ) . click( function() {
        $( "#jquery-menu-2-2-sub" ) . slideToggle( 'slow' );
    } );
    $( '#jquery-menu-3-triangle' ) . click( function() {
        $( "#jquery-menu-3-sub" ) . slideToggle( 'slow' );
    } );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
span.menu-triangle {
    border-radius: 0.5em;
    background-color: gray;
    color: white;
    font-size: 12px;
    margin: 0 10px;
    padding: 0 15px;
    cursor: pointer;
}
span.menu-triangle:hover {
    background-color: red;
}
ul.jquery-menu {
}
ul.jquery-menu li {
    list-style-type: square;
}
ul.jquery-menu-sub {
    display: none;
}
ul.jquery-menu-sub li {
    list-style-type: square;
}
-->
</style>

HTML

<ul class="jquery-menu">
    <li id="jquery-menu-1"><a href="#">メニュー1</a><span id="jquery-menu-1-triangle" class="menu-triangle">▼</span>
        <ul class="jquery-menu-sub" id="jquery-menu-1-sub">
            <li><a href="#">メニュー1-1</a><span id="jquery-menu-1-1-triangle" class="menu-triangle">▼</span>
                <ul class="jquery-menu-sub" id="jquery-menu-1-1-sub">
                    <li><a href="#">メニュー1-1-1</a><span id="jquery-menu-1-1-1-triangle" class="menu-triangle">▼</span>
                        <ul class="jquery-menu-sub" id="jquery-menu-1-1-1-sub">
                            <li><a href="#">メニュー1-1-1-1</a></li>
                            <li><a href="#">メニュー1-1-1-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">メニュー1-1-2</a></li>
                    <li><a href="#">メニュー1-1-3</a></li>
                    <li><a href="#">メニュー1-1-4</a></li>
                    <li><a href="#">メニュー1-1-5</a></li>
                </ul>
            </li>
            <li><a href="#">メニュー1-2</a><span id="jquery-menu-1-2-triangle" class="menu-triangle">▼</span>
                <ul class="jquery-menu-sub" id="jquery-menu-1-2-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-3</a></li>
            <li><a href="#">メニュー1-4</a></li>
            <li><a href="#">メニュー1-5</a></li>
            <li><a href="#">メニュー1-6</a></li>
            <li><a href="#">メニュー1-7</a></li>
        </ul>
    </li>
    <li id="jquery-menu-2"><a href="#">メニュー2</a><span id="jquery-menu-2-triangle" class="menu-triangle">▼</span>
        <ul class="jquery-menu-sub" id="jquery-menu-2-sub">
            <li><a href="#">メニュー2-1</a></li>
            <li><a href="#">メニュー2-2</a><span id="jquery-menu-2-2-triangle" class="menu-triangle">▼</span>
                <ul class="jquery-menu-sub" id="jquery-menu-2-2-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-3</a></li>
            <li><a href="#">メニュー2-4</a></li>
            <li><a href="#">メニュー2-5</a></li>
            <li><a href="#">メニュー2-6</a></li>
            <li><a href="#">メニュー2-7</a></li>
        </ul>
    </li>
    <li id="jquery-menu-3"><a href="#">メニュー3</a><span id="jquery-menu-3-triangle" class="menu-triangle">▼</span>
        <ul class="jquery-menu-sub" id="jquery-menu-3-sub">
            <li><a href="#">メニュー3-1</a></li>
            <li><a href="#">メニュー3-2</a></li>
            <li><a href="#">メニュー3-3</a></li>
            <li><a href="#">メニュー3-4</a></li>
            <li><a href="#">メニュー3-5</a></li>
            <li><a href="#">メニュー3-6</a></li>
            <li><a href="#">メニュー3-7</a></li>
        </ul>
    </li>
</ul>

要点解説

JavaScript

<script type="text/javascript" src="jquery.js"></script> // jquery.js を読み込む
<script type="text/javascript">
<!--
$( function() { // document が準備できたら呼び出す
    $( '#jquery-menu-1-triangle' ) . click( function() { // id が jquery-menu-1-triangle の要素をクリックしたとき
        $( "#jquery-menu-1-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-1-sub の要素をゆっくり開閉
    } );
    $( '#jquery-menu-1-1-triangle' ) . click( function() { // id が jquery-menu-1-1-triangle の要素をクリックしたとき
        $( "#jquery-menu-1-1-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-1-1-sub の要素をゆっくり開閉
    } );
    $( '#jquery-menu-1-1-1-triangle' ) . click( function() { // id が jquery-menu-1-1-1-triangle の要素をクリックしたとき
        $( "#jquery-menu-1-1-1-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-1-1-1-sub の要素をゆっくり開閉
    } );
    $( '#jquery-menu-1-2-triangle' ) . click( function() { // id が jquery-menu-1-2-triangle の要素をクリックしたとき
        $( "#jquery-menu-1-2-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-1-2-sub の要素をゆっくり開閉
    } );
    $( '#jquery-menu-2-triangle' ) . click( function() { // id が jquery-menu-2-triangle の要素をクリックしたとき
        $( "#jquery-menu-2-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-2-sub の要素をゆっくり開閉
    } );
    $( '#jquery-menu-2-2-triangle' ) . click( function() { // id が jquery-menu-2-2-triangle の要素をクリックしたとき
        $( "#jquery-menu-2-2-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-2-2-sub の要素をゆっくり開閉
    } );
    $( '#jquery-menu-3-triangle' ) . click( function() { // id が jquery-menu-3-triangle の要素をクリックしたとき
        $( "#jquery-menu-3-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-3-sub の要素をゆっくり開閉
    } );
} );
// -->
</script>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, メニュー, 逆引き パーマリンク