【jQuery】ちょっとシンプルなアコーディオンメニュー

Tweet

Category JavaScript / Tagged jQuery 2012/02/23

問題

ぱたぱた開閉するメニューを作りたい。

開いたり閉じたりしたら、ページを移動しても状態を維持して欲しい。

答え

前回のアコーディオンメニューよりちょっと機能追加したバージョンです。

開いた位置を記憶しておいて新しく開き直した場合でもその状態を保持します。

前回との違いはjavascript部分だけです。jquery.cookie.jsを使用しています。

DEMO

• トップ
• 日記
  • 2012/02
  • 2012/01
  • 2011/12
  • 2011/11
• コラム
  • jQuery
  • jQuery UI
  • jQueryMobile
• その他
  • profile
  • Twitter
  • Facebook
• リンク

⇒このページを開き直す

JavaScript

<script src="jquery.cookie.js"></script>
<script>
(function($){
    $.fn.extend({
        "simpleMenu" : function() {
            return this.each(function() {
                $(this).addClass("simpleMenu");
                var that    = this;
                var memoryString = $.cookie('simpleMenu');
                if(memoryString){
                    var memory = $.cookie('simpleMenu').split(",");
                    for(var i in memory){
                        memory[i] = parseInt(memory[i],10);
                    }
                }else{
                    var memory = [];
                }
                $(this).find("li:has(ul)").each(function(){
                    var index = $("li:has(ul)").index(this);
                    if($.inArray(index, memory) == -1){
                        $("ul", this).hide();
                    }
                });
                
                $(this).find("li > div").bind("click",function(){
                    var index = $("li:has(ul)").index($(this).parent());
                    if($(this).next("ul").css("display") == "none"){
                        $(this).next("ul").slideDown();
                        memory.push(index);
                    }else{
                        $(this).next("ul").slideUp();
                        var length = memory.length - 1;
                        var i;
                        for(i = length; i >= 0; i--){
                            if(memory[i] == index){
                                memory.splice(i,1);
                            }
                        }
                    }
                    $.cookie('simpleMenu', memory.join(","));
                });
            });
        }
    });
})(jQuery);

$(function(){
    $('#menu').simpleMenu();
});
</script>