凸 ブロックのつみかさね

デザイン、技術メモ、レビュー中心の雑記ブログ

jQueryのドロップダウンメニューコードを自分好みに改変してみた

jQueryを使ったドロップダウンメニューのコードはいろいろありますが、個人的にこれが一番シンプルだと思います。ただ書き方がちょっと個人的に好きではないので、ちょっと改変してみたいと思います。

改変前のコード

私は最近、hover要素を使わなくなりました。出来る限り、on要素に置き換えるようにしています。理由は覚えるコードが少なくてすむことと、見やすさのためですね。

makasete-web.net

【改変前のコード】
<script>
$(function(){
    $('#menu li').hover(function(){
        $("ul:not(:animated)", this).slideDown();
    }, function(){
        $("ul.child",this).slideUp();
    });
});
</script>

改変後のコード1

挙動は同じで書き方だけ変えました。hoverの挙動を.onによる「mouseover」と「mouseleave」で明記しながら動かす形ですね。

【改変コード1】
<script>
$(function(){
    $('#menu li').on({
        'mouseover': function(){
            $("ul:not(:animated)", this).slideDown();
        },
        'mouseleave': function(){
            $("ul.child",this).slideUp();
        }
    });
});
</script>

改変後のコード2

onを使った書き方は他にも以下のようなものがあります。ただちょっと見づらい気がするので個人的には「改変後のコード1」が好みです。

【改変コード2】
<script>
$(function(){
    $('#menu li').on('mouseover', function(){
        $("ul:not(:animated)", this).slideDown();
    }).on('mouseleave', function(){
        $("ul.child",this).slideUp();
    });
});
</script>

今回のつみかさね

技術的な小ネタ、というかメモレベルであれば、紹介できるものがあると思うのでこういったパターンの記事も書いていきたいなと思います。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

©blockworks.