「include/JS/開閉メニュー」の編集履歴（バックアップ）一覧に戻る

include/JS/開閉メニュー - (2022/07/07 (木) 16:43:54) のソース

#javascript(){{{{{
<script type="text/javascript">

var menuStatusDic = {};
//指定したメニューの開閉処理
var openMenu = function(id) {
    //slideを使うと時間差があって状態取得がうまく動作しないため，先に状態取得を行う
    menuStatusDic[id] = ($(id).css('display') === 'none');//非表示(none)なら true，表示(block)なら false　ただしこのあとtrue,falseは反転する
    
    $(id).slideToggle();
    localStorage.setItem('menuStatusDic',JSON.stringify(menuStatusDic));
    //console.log(menuStatusDic);    
}

//メニューのフルオープン
var openAllMenu = function() {
    $("[id^=menu_]").each(function(){
	var tID = "#" + $(this).attr('id');

	$(tID).slideDown();//表示
	menuStatusDic[tID] = true;//表示されてる(block)なら true
    });
    localStorage.setItem('menuStatusDic',JSON.stringify(menuStatusDic));
    //console.log(menuStatusDic);    
}
//メニューのフルクローズ
var closeAllMenu = function() {
    $("[id^=menu_]").each(function(){
	var tID = "#" + $(this).attr('id');

	$(tID).slideUp();//非表示
	menuStatusDic[tID] = false;//非表示(none)なら false
    });
    localStorage.setItem('menuStatusDic',JSON.stringify(menuStatusDic));
    //console.log(menuStatusDic);    
}

document.addEventListener('DOMContentLoaded',function(){
    //起動時に値があればタブ状態を戻す
    var itemValue = localStorage.getItem('menuStatusDic');
    if (itemValue !== null) {
	menuStatusDic = JSON.parse(itemValue);
       //console.log(menuStatusDic);

	for (var prop in menuStatusDic) {
	    if (menuStatusDic.hasOwnProperty(prop)) {
		if (menuStatusDic[prop] === true) {
		    $(prop).show();
		    //$(prop).slideDown();
		} else{
		    $(prop).hide();
		    // $(prop).slideUp();
		}
	    }
	}
    };
    //#button_hoge というセレクタを拾ってくる
    $("[id^=button_]").on("click", function(){
	//#button_hoge を #menu_hogeに書き換える
	var tID = $(this).attr('id');
	var newID = "#menu_" + tID.replace(/button_/g, '');
	//console.log(newID);
	openMenu(newID);
	return false;
    });
    //メニューを全部開く関数を呼び出すボタン
    $("#openAllMenu").on("click", function(){
	openAllMenu();
	return false;
    });
    //メニューを全部閉じる関数を呼び出すボタン
    $("#closeAllMenu").on("click", function(){
	closeAllMenu();
	return false;
    });
});

</script>
}}}}}