WEB系キャンパス

(K)jQueryのslideToggleを使ってスマホに最適なアコーディオンメニューを作成

jquery_accordion_top

最近特にスマホの案件が増えてる・・・というよりも、セットで当たり前になってます。
スマホはディスプレイの表示領域がPCに比べて少ないので、ファーストビューはもちろん、スライドした下の領域も少ないスペースを有効に使って、ユーザーにいち早く情報を伝える必要があります。そんな訳で今回はjQueryのtoggleメソッドを使った定番のアコーディオンメニューを備忘録としてまとめておきます。

アコーディオンメニューはjQueryの「slideUp()」や「slideDown()」が一般的なようですが、今回はToggle()を使用して、アコーディオンメニューを実装させてみます。

toggleメソッドの概要

jQuery日本語リファレンスによると…

各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。
jQuery日本語リファレンスより引用

ある要素に設定することによって、表示・非表示を切り替えるjQueryメソッドという事でおけっすか?
その他に「slideToggle」でslideDown/slideUpの動作や「toggleClass」でスイッチの切り替えとかができます。

「slideToggle」を使ってシンプルなアコーディオンメニューを作成

まず、元となるメニューをHTMLとCSSで組みます。

【HTML】

<ul class="accordion">
    <li>
        <p><span>ナビゲーション1</span></p>
        <ul>
            <li><a href=" #">ナビゲーション1-1</a></li>
            <li><a href=" #">ナビゲーション1-2</a></li>
            <li><a href=" #">ナビゲーション1-3</a></li>
        </ul>
    </li>
    <li>
        <p><span>ナビゲーション2</span></p>
        <ul>
            <li><a href=" #">ナビゲーション2-1</a></li>
            <li><a href=" #">ナビゲーション2-2</a></li>
            <li><a href=" #">ナビゲーション2-3</a></li>
        </ul>
    </li>
    <li>
        <p><span>ナビゲーション3</span></p>
        <ul>
            <li><a href=" #">ナビゲーション3-1</a></li>
            <li><a href=" #">ナビゲーション3-2</a></li>
            <li><a href=" #">ナビゲーション3-3</a></li>
        </ul>
    </li>
</ul>

【CSS】

li{
     list-style: none;    
}

ul.accordion{
     width:100%;
     overflow: hidden;
}

ul.accordion ul{
     display: none;
}    


ul.accordion li p{
     background: #F70841;
     padding:10px 20px;
     border-bottom: 1px solid #b3032d;
     cursor: pointer;/*カーソルを通常の物に*/    
}

ul.accordion ul li{
     background: #ff89a5;
     padding:10px 20px;
     border-bottom: 1px dashed #fff;    
}

ul.accordion ul li:last-child{
     border:none;
}
    

「ul.accordion ul」を「display:none;」で非表示にさせて、Toggleを使って「display:block;」と切り替える動きです。
そのためのコードは以下(当然、本チャンの「jquery.js」が読み込まれてるのが大前提です)



<script>
    $(function(){
        $(".accordion p").on("click", function() {
            $(this).next().slideToggle();
        });
    });
</script>

「slideToggle()」のカッコの中に”fast”、”normal”、”slow”、”1000(数値入力)”をすれば、スピードの調整も可能です。

DEMO

「toggleClass」を使ってオープン時とクローズ時の画像を切り替える

このままでもいいんですが、メニューが開いてる状態と閉まってる状態を切り替えた方がユーザビリティー的にもいい場合があります。そういう時は「toggleClass」を追加します。

【HTML】
さっきと同じ

【CSS】※追加部分のみ

ul.accordion li p{
     background-image: url(img/open.png);
     background-repeat: no-repeat;
     background-position: 97% center;
     background-size: 22px;
}

ul.accordion li p.active{
          background-image: url(img/close.png);
}

さっきのCSSコードにこのコードを入れればOKです。background画像として矢印の画像を指定して、active時の画像も指定しているだけです。

【Javascript】※全文

<script>
    $(function(){
        $(".accordion p").on("click", function() {
            $(this).next().slideToggle();
            $(this).toggleClass("active");     //追加した一文
        });
    });
</script>


DEMO

まとめ

スマホサイトでは、何かと使用頻度の多いアコーディオンメニューもtoggleメソッドを使えば、短い文章量でサクッと実装できるので重宝します。この辺の基本は抑えて円滑にサイト構築を進めて行きたい所ですね。今回は以上ですm(_ _)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です