スマホのメニューなどに使えるjQueryを使って要素をクリックした時に開閉させる方法（ドグルボタン化）

Tweet

237

jQueryを使えば色々と便利なことがあります、今回はjQueryを使って要素をボタン化して、それにアクションを加えてやるというものです

TENPARA.NETで現在作成中のテンプレートで作成しているスマートフォンでボタンをクリックしたらメニューが出来るものです、これもjQueryでボタン化してそれにアクションを加えています

初期状態

左上のボタンをクリックして展開

仕組み

左上のボタンはdivですクラスがbutton-toggleのやつです、このdivにアクションを付けることでボタン化しています
アクションは、他の要素がslideup、slidedownを交互に繰り替えるslideToggleを使うことで表現しています

HTML コード

<header>
    <div class="title"><h1><a href="">創造WEB</a></h1></div>
    <div class="button-toggle">☰</div>
    <div class="menu">
        <ul>
            <li><a href="">レスポンシブ</a></li>
            <li><a href="">モバイル</a></li>
            <li><a href="">スマートフォン</a></li>
            <li><a href="">カテゴリ</a></li>
            <li><a href="">カテゴリ2</a></li>
        </ul>
    </div>
</header>

jQuery コード

<script>
$(function(){
    $(".menu").css("display","none");
    $(".button-toggle").on("click", function() {
        $(".menu").slideToggle();
    });
});
</script>

まず開いている状態の.menuを閉じます、最初からCSSで閉じておいてもいいのですが。
これは好みです

次に.buuton-toggleのクラスが付いた要素にアクション付けます

.on(“click”,function(){アクションの内容})
セレクタで選択したものをクリックした時にカッコ内のものを実行するようにします。これでアクション化出来ました

そしてアクション化したものの内容をslidetoggleにすることで、display:noneになっているものはdisplay:blockに、あとはその逆を交互に繰り返させます

意外と簡単にボタン化できるので、例えば通常ホバーの時しかツールチップが表示されないですが、クリックしたらツールチップの表示が固定されるなど色々な場面で使えます

Tweet

短縮URL:

2013年12月14日 WEB制作系 jQuery