jQuery で作るアコーディオンメニュー

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

2階層の上下開閉式アコーディオン型メニューは、jQuery で簡単に作れる。さらに、css で飾って、ボックスにしてみた。メニュー欄をクリックすると、クリックしたメニューのサブメニューが現れ、クリックしたメニュー以外のサブメニューが開いていた場合は、そのサブメニューを閉じる。メニュー欄を再びクリックすると、サブメニューが折りたたまれる。

実装例

実装例の動作について

「 メニュー2 | ▼ 」をクリックすると、メニュー1のサブメニューが折りたたまれ、メニュー2のサブメニューが現れる。「 メニュー2 | ▼ 」を再びクリックすると、メニュー2のサブメニューも折りたたまれる。

ソースコード

JavaScript

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

CSS

<style type="text/css">
<!--
ul.jquery-menu {
    background-color: silver;
    list-style-position: inside;
    width: 500px;
    border: 1px darkgray solid;
    border-bottom: none;
}
ul.jquery-menu li {
    padding-bottom: 5px;
    border-bottom: 1px darkgray solid;
    list-style-type: none;
}
ul.jquery-menu li div.jquery-menu-title-box {
    padding: 5px 10px 0 10px;
    cursor: pointer;
}
ul.jquery-menu li div.menu-title {
    float: left;
    font-weight: bold;
}
ul.jquery-menu li div.menu-triangle {
    float: right;
    text-align: right;
    color: darkgray;
    border-left: 1px darkgray solid;
}
ul.jquery-menu-sub {
    display: none;
    background-color: lightgrey;
    list-style-position: inside;
    margin: 5px;
}
ul#jquery-menu-1-sub {
    display: block;
}
ul.jquery-menu-sub li {
    padding: 5px 10px 5px 10px;
    border: none;
    list-style-type: square;
}
-->
</style>

HTML

<ul class="jquery-menu">
    <li id="jquery-menu-1">
        <div id="jquery-menu-1-title" class="jquery-menu-title-box">
            <div class="menu-title">メニュー1</div>
            <div class="menu-triangle">　▼</div>
            <div style="clear: both;"></div>
        </div>
        <ul class="jquery-menu-sub" id="jquery-menu-1-sub">
            <li><a href="#">メニュー1-1</a></li>
            <li><a href="#">メニュー1-2</a></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">
        <div id="jquery-menu-2-title" class="jquery-menu-title-box">
            <div class="menu-title">メニュー2</div>
            <div class="menu-triangle">　▼</div>
            <div style="clear: both;"></div>
        </div>
        <ul class="jquery-menu-sub" id="jquery-menu-2-sub">
            <li><a href="#">メニュー2-1</a></li>
            <li><a href="#">メニュー2-2</a></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">
        <div id="jquery-menu-3-title" class="jquery-menu-title-box">
            <div class="menu-title">メニュー3</div>
            <div class="menu-triangle">　▼</div>
            <div style="clear: both;"></div>
        </div>
        <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-title' ) . click( function() { // id が jquery-menu-1-title の要素をクリックしたとき
        $( "#jquery-menu-1-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-1-sub の要素をゆっくり開閉
        $( "#jquery-menu-2-sub" ) . slideUp( 'slow' ); // id が jquery-menu-2-sub の要素をゆっくり閉じる
        $( "#jquery-menu-3-sub" ) . slideUp( 'slow' ); // id が jquery-menu-3-sub の要素をゆっくり閉じる
    } );
    $( '#jquery-menu-2-title' ) . click( function() { // id が jquery-menu-2-title の要素をクリックしたとき
        $( "#jquery-menu-1-sub" ) . slideUp( 'slow' ); // id が jquery-menu-1-sub の要素をゆっくり閉じる
        $( "#jquery-menu-2-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-2-sub の要素をゆっくり開閉
        $( "#jquery-menu-3-sub" ) . slideUp( 'slow' ); // id が jquery-menu-3-sub の要素をゆっくり閉じる
    } );
    $( '#jquery-menu-3-title' ) . click( function() { // id が jquery-menu-3-title の要素をクリックしたとき
        $( "#jquery-menu-1-sub" ) . slideUp( 'slow' ); // id が jquery-menu-1-sub の要素をゆっくり閉じる
        $( "#jquery-menu-2-sub" ) . slideUp( 'slow' ); // id が jquery-menu-2-sub の要素をゆっくり閉じる
        $( "#jquery-menu-3-sub" ) . slideToggle( 'slow' ); // id が jquery-menu-3-sub の要素をゆっくり開閉
    } );
} );
// -->
</script>

スポンサード リンク

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