[ プログラミング ] jQueryでシンプルなアコーディオンメニューを作る方法

アコーディオンメニューについては、以前、他の方が書いたスクリプトを見て勉強したことはあったのですが、自分で実装したことがなかったので、作ってみました。

デモは以下からどうぞ。

DOMO

HTML5でコーティングしています。jQueryもCSSもHTMLのheadタグ内に書いています。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script>
$(function(){
    $('.main_menu').on('click', function() {
        $(this).next('ul:not(:animated)').slideToggle();
        $(this).children('span').toggleClass('open');

        // メニューをクリックしたら他のサブメニューを閉じる
        $('.sub_menu').not($(this).next('.sub_menu')).slideUp();
        $('.main_menu').children('span').not($(this).children('span')).removeClass('open');
    });

});
</script>
<style>
.menuList {
    width:200px;
    margin:0;
    padding:0;
    border:1px solid #000;
    border-bottom:none;
    list-style:none;
}

.main_menu {
    position:relative;
    margin:-1px -1px 0 -1px;
    padding:10px;
    line-height:20px;
    color:#fff;
    border:1px solid #000;
    background:#7da667;
    cursor:pointer;
}

.main_menu a {
    color:#fff;
    text-decoration:none;
}

.main_menu span {
    display:block;
    background:url('images/arrow.png') 100% 0% no-repeat;
}

.main_menu span.open {
    background:url('images/arrow.png') 100% 100% no-repeat;
}

.sub_menu {
    display:none;
    margin:0;
    padding:0;
    list-style:none;
}

.sub_menu li a {
    display:block;
    margin:-1px -1px 0 -1px;
    padding:10px;
    color:#655527;
    background:#e8d9af;
    border:1px solid #000;
    text-decoration:none;
}
</style>
<title>jQueryでシンプルなアコーディオンメニューを作る方法</title>
</head>
<body>
<ul class="menuList">
    <li>
        <div class="main_menu"><span>メニュー1</span></div>
        <ul class="sub_menu">
            <li><a href="#">サブメニュー1</a></li>
            <li><a href="#">サブメニュー2</a></li>
            <li><a href="#">サブメニュー3</a></li>
        </ul>
    </li>
    <li><div class="main_menu"><a href="#">メニュー2</a></div></li>
        <div class="main_menu"><span>メニュー3</span></div>
        <ul class="sub_menu">
            <li><a href="#">サブメニュー1</a></li>
            <li><a href="#">サブメニュー2</a></li>
            <li><a href="#">サブメニュー3</a></li>
        </ul>
    </li>
    <li><div class="main_menu"><a href="#">メニュー4</a></div></li>
    <li>
        <div class="main_menu"><span>メニュー5</span></div>
        <ul class="sub_menu">
            <li><a href="#">サブメニュー1</a></li>
            <li><a href="#">サブメニュー2</a></li>
            <li><a href="#">サブメニュー3</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

「.slideToggle()」を使えばすごく簡単です。3行で書けてしまいます。今回は、矢印画像も付けてみたり、メニューをクリックしたら他のサブメニューを閉じるようにしたので少しコードが長くなりました。

「.not()」を使っているのですが、セレクタが長すぎてわかりずらいです。もう少しシンプルにまとめられられないものでしょうか…。