WEBサイトのアコーディオンやナビゲーションの開閉状態を維持しておきたい場合、Cookie(クッキー)を使って制御する方法があります。
Cookieとは、WEBサイトを閲覧したときに、訪問者が訪れたサイトや入力したデータ、利用環境などの情報が記録されたファイル(仕組み)です。今回は、jquery.cookie.jsを使ってナビゲーションの状態を維持するソースコードを紹介します。
jquery.cookie.jsの使い方
以下の3つが基本になります。オプションについては割愛。
cookieの保存
$.cookie( "cookieの名前" , "値" );
cookieの取得
$.cookie( "cookieの名前" )
cookieの削除
$.removeCookie( "cookieの名前" );
ナビゲーションの状態を維持するソースコード
今回の主題ではないため、開閉ナビゲーションのソースは省略しますが、閉じた状態がデフォルト、クリックでclass「show-navbar」が付与されて開くナビゲーションを想定しています。
$(function(){
if($.cookie("open-navbar") == "open" ){
$('#nav-bar').removeClass('show-navbar');
}
$("#header-toggle").click(function() {
if($.cookie("open-navbar")){
$.removeCookie("open-navbar" , { path: "/" });
} else {
$.cookie("open-navbar" , "open" , { expires: 7, path: "/" });
}
return false;
});
});
【2行目~】cookie「open-navbar」が保存されてる場合(ナビゲーションが閉じている状態)、#nav-barに入っているclass「show-navbar」を削除(閉じた状態を維持)します。
【5行目~】#header-toggleをクリックした時、cookie「open-navbar」が保存されてる場合、cookieを削除します(開いた状態を維持)。cookie「open-navbar」が保存されていない場合(ナビゲーションが開いている状態)、cookie「open-navbar」に「open」を保存します。
Related Posts