jQueryを使ったスライド開閉メニューをCookieでコントロールする

サンプル
サンプルファイルのダウンロード

ちょっと前に流行った？アコーディオンメニューの開閉状態を
Cookieで保存する方法をメモをかねて紹介します。

必要なファイルを集める

面倒だと思うのでサンプルにまとめました。
サンプルファイルをダウンロードして新しいHTMLでJSファイルを読み込んでください。

サンプルファイルのダウンロード

HTMLを用意する

CSSファイルを読み込む

この記事でCSSの解説はしてません。。

JSファイルを読み込む

HTMLをマークアップする

  

    
A
    

      
A-1
      
A-2
      
A-3
      
A-4
      
A-5
      
A-6
      
A-7
    
  
  

  

    
B
    

      
B-1
      
B-2
      
B-3
      
B-4
      
B-5
      
B-6
      
B-7
    
  
  

HTMLがちょっと気持ち悪いと思う人もいるかもしれませんが
今回はこんな感じでマークアップしてます。

JSを書く

普通にアコーディオンメニューにする

今回は特にアコーディオン部分の記述にはふれませんが
以下の記述でアコーディオンになります。

jQuery Easingプラグインを使ってちょっと動きを変えてます。
何気ないアコーディオンもこういう動きなら面白いかもしれないですね。
単純に鬱陶しいだけにもなり得ますけど…

ちなみに、前回のエントリjQuery.easingscroll.jsはEasingプラグインを
含んでいるので併せて使うと楽しい動き(≠うざい動き)のサイトになりますね！

/*
* @ スライドナビゲーション
*/
$("ul.sub_nav","div#sub").each(function(i){
// 開閉ナビで使う変数定義
  var me = $(this),
    box = me.parent(), // 親要素のdiv.nav
    heading = me.prev().append(""),
    // 兄要素のh2にspan.toggleを追加して変数に保存
    toggle = $("span.toggle",heading);// Toggle

  // 下層ナビとToggleボタンを隠す
  me.hide();
  toggle.hide();

  // Toggleボタンの表示非表示
  heading.hover(function(){
    toggle.show();
  },function(){
    // h2.openedの場合はToggleを表示したままにする
    if(!heading.hasClass("opened")) toggle.hide();
  });

  // Toggleクリック時の動作
  toggle.click(function(){
    heading.toggleClass("opened");
    if(!box.hasClass("opened")) box.addClass("opened");

    // アニメーション設定
    me.animate({
      height: "toggle"
    },{
      easing: "easeOutBounce",
      // jQuery Easingを使って開閉時に跳ねるようにしてみる
      duration: 400,
      complete: function(){
        if(!heading.hasClass("opened")) box.removeClass("opened");
      }
    });
  });
});

jQuery Cookieを使うのでちょっと紹介

jQuery.cookieプラグインを使ってます。
jQueryを使う場合はこれが一番わかりやすく、簡単にCookieを扱えます。

いちおう説明しておくと

$.cookie("Cookieの名前", "Cookieの値"); // 保存
$.cookie("Cookieの名前"); // 値の読み出し

という具合で使えます。
保存時、第3引数でオプションを指定することで保存日数などを指定できます。

$.cookie("Cookieの名前", "Cookieの値" { expires: 7, path: "/", domain: "jquery.com", secure: true });

また、値にnullを入れることでCookieを削除することができます。

$.cookie("Cookieの名前", null); // Cookieの削除

Cookieを使うタイミング

開閉状態を保存する場合Cookieを扱う箇所が3つあって

• Toggleをクリックしたとき(開けるとき) – Cookieを保存
• Toggleをクリックしたとき(閉じるとき) – Cookieを保存
• ページをロードしたとき – Cookieを読み出す

この3つのタイミングでCookieを保存したり、読み出すことで開閉状態を保存できます。

Cookieの保存方法をどうするのか

全てのアコーディオンでCookieを保存するのはきれいなやり方ではないので
開いた状態を記憶するためにCookieには[i]という値を保存していくことにします。

例えば、1つめのパネルが開いた場合、Cookieには[0]が保存されることになります。
さらに、2つめも開いた場合、[0][1]という値が保存されます。

閉じる場合には逆で[i]を取り除くことで元の状態になります。
これらの値はパネルが開いた順に保存されていくので
3-2-4という順番で開いた場合、[2][1][3]といったように保存されますが
値の削除時にはreplace関数を使うので、この順番は特に問題ありません。

ちなみに[]を使う理由はパネル数が10を超える場合に
0と1〜9の区別がつかなくなるのを防ぐためです。

とりあえずCookieを使って保存していく

まずはCookieの値を変数に保存しておきます。
これはページロードのタイミングで行います。

var cookie = ($.cookie("menu") ＆＆ $.cookie("menu")!=null) ? $.cookie("menu") : "";

Cookieの名前はmenuにしています。
Cookiに値がある場合はcookieに値を保存
それ以外の場合は空の値を渡しておきます。

あとCookieに保存する・識別用の値を宣言しておきます。

// 開閉ナビで使う変数定義に追記する
var pos = "["+i+"]"; // Cookieに保存する

この i はeach関数でループ時に得られる引数を使います。
準備ができたらClick時に保存するように記述します。

if(!box.hasClass("opened")){ // 開くとき
  box.addClass("opened");
  cookie += pos; // このパネルの識別用の値をCookieの値に追記
  $.cookie("menu",cookie); // Cookieの値をCookie["menu"]に保存する
}else{ // 閉じるとき
  cookie = cookie.replace(pos,""); // このパネルの識別用の値をCookieの値から削除する
  $.cookie("menu",cookie.length==0 ? null : cookie);
  // Cookieの値をCookie["menu"]に保存する
  // このとき値が空になったらCookie["menu"]を削除する
}

あとは初期表示パネルを最初に保存したCookieの値から決めます。
cookie.match(new RegExp(pos))の部分で判別してます。

// クッキーに[i]がある場合はナビを表示する
if($.cookie("menu")==null
|| cookie.indexOf(pos)==-1){
  me.hide();
  toggle.hide();
}else{
  box.addClass("opened");
  heading.addClass("opened");
}

これらのソースコードを追記した完成版が以下になります。

/*
* @ スライドナビゲーション
* @ Cookieを使って開閉をコントロール
*/
// ナビゲーションで使うCookieを読みこんでおく
var cookie = ($.cookie("menu") ＆＆ $.cookie("menu")!=null) ? $.cookie("menu") : "";
$("ul.sub_nav","div#sub").each(function(i){
  // 開閉ナビで使う変数定義
  var me = $(this),
    box = me.parent(), // 親要素のdiv.nav
    heading = me.prev().append(""),
    // 兄要素のh2にspan.toggleを追加して変数に保存
    toggle = $("span.toggle",heading), // Toggle
    pos = "["+i+"]"; // Cookieに保存する

  // クッキーに[i]がある場合はナビを表示する
  if($.cookie("menu")==null
  || cookie.indexOf(pos)==-1){
    me.hide();
    toggle.hide();
  }else{
    box.addClass("opened");
    heading.addClass("opened");
  }

  // Toggleボタンの表示非表示
  heading.hover(function(){
    toggle.show();
  },function(){
    // h2.openedの場合はToggleを表示したままにする
    if(!heading.hasClass("opened")) toggle.hide();
  });

  // Toggleクリック時の動作
  toggle.click(function(){
    heading.toggleClass("opened");
    if(!box.hasClass("opened")){
      box.addClass("opened");
      cookie += pos;
      $.cookie("menu",cookie);
    }else{
      cookie = cookie.replace(pos,"");
      $.cookie("menu",cookie.length==0 ? null : cookie);
    }

    // アニメーション設定
    me.animate({
      height: "toggle"
    },{
      easing: "easeOutBounce", // jQuery Easing
      duration: 400,
      complete: function(){
        if(!heading.hasClass("opened")) box.removeClass("opened");
      }
    });
  });
});

完成サンプルを見る

というわけで

肝心のCookieはかなり簡単に使えるということが伝わったでしょうか。
Cookieの保存方法は色々考えられるので試してみると楽しいです。

jQueryとjquery.cookie.jsを使って開閉を保持するメニューを作ってみる – caraldo.net
jQueryを使用したCookie開閉保持メニューをよりjQueryっぽく書き直す – caraldo.net

同じHTMLで2通りのやり方とか。後の記事の方がCookieがすっきりします。