クリックで動くプルダウンメニューの作成

メニューの項目数が増えてくると一度で全てを表示するのは難しい。
だからといってカテゴリーに分けて何度も読み込みをさせるのもユーザーに対しては親切でない。
そんな時に便利な「jquery」で実装可能な開閉式のメニュー(プルダウンメニュー)のメモ。

HTML

<nav>
<ul>
<li><a href="○○○○">○○○○</a></li>
<li>
<a href="○○○○">○○○○</a>
<ul>
<li><a href="○○○○">○○○○</a></li>
<li><a href="○○○○">○○○○</a></li>
</ul>
</li>
<li>
<a href="○○○○">○○○○</a>
<ul>
<li><a href="○○○○">○○○○</a></li>
<li><a href="○○○○">○○○○</a></li>
<li>
<a href="○○○○">○○○○</a>
<ul>
<li><a href="○○○○">○○○○</a></li>
<li><a href="○○○○">○○○○</a></li>
<li><a href="○○○○">○○○○</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>

jQuery

$(function(){
    $('nav li a').next('ul').hide();
    $('nav li a').click(function(){
        var checkElement = $(this).next('ul');
        if(checkElement.length && !checkElement.is(':visible')){
            checkElement.slideDown('srow');
            return false;
        }else if(checkElement.length && checkElement.is(':visible')){
            checkElement.slideUp('srow');
            return false;
        }
    });
});

表示するターゲットを「$(this).next(‘ul’).length」で判定し、あれば起動、なければそのままクリック。
階層が深くなってもHTMLの追加のみで対応可能。
初期状態の表示をCSS（display: none;）にする場合は、「$(‘nav li a’).next(‘ul’).hide();」は不要。

オンマウスの場合は下記

$(function(){
    $('nav li').children('ul').hide();
    $('nav li').hover(function(){
        if($(this).children('ul').length){
	    $(this).children('ul').stop(true,false).slideDown('srow');
        }
    },function(){
        if($(this).children('ul').length){
            $(this).children('ul').stop(true,false).slideUp('srow');
        }
    });
});