SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

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

問題

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

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

答え

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

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

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

DEMO

⇒このページを開き直す

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>

関連するメモ

コメント