JavaScript(jQuery)、HTML、および Cookie を使用して折りたたみ可能なセクションを持つ左の列メニューを持つコントロール パネルに取り組んでいます。簡単なアイデアについては、画像を参照してください。
画像では、Account Information
メニューが展開されている/開いている/表示されていることがわかります。
Server Admin
、Database Management
、Domain Management
、Mail
、およびseveral others
画像に表示されていないものは、折りたたまれている/閉じている/非表示になっています
現在、メニュー セクションごとに、折りたたまれているかどうかを示す Cookie を保存しています。10 個のメニュー セクションがある場合、ページの読み込みごとに 10 個の Cookie (n X メニュー セクション) が読み取られます。
したがって、私の質問は、コントロール パネルにこの情報を保持する 20 ~ 30 個のクッキーがある場合、代わりにそれらを 1 つのクッキーとして保存し、各メニューの値をこの 1 つのクッキー、おそらく JSON 文字列またはその他のものに保存する方がよいでしょうか?クッキーに保存される形式?
私の現在よりも良い方法を聞きたいです。現在は機能していますが、気分が悪いだけです。
助けてください、私は決して Javascript の専門家ではなく、まだ JS を学んでいます。私のバックグラウンドはより PHP です。
これまでの私のコードは次のとおりです...
// jQuery Cookie plugin is not shown but is also used.
$(document).ready(function() {
// Handle the menu state based on Click events
$('#menu-sidebar li:has(ul) .heading').click(function() {
$(this).next().toggle();
if ($(this).next().is(':visible')) {
$.cookie($(this).text().replace(/\+|-|\s/g,''), 'expanded');
$(this).children('.open').text('-');
}
if ($(this).next().is(':hidden')) {
$.cookie($(this).text().replace(/\+|-|\s/g,''), 'collapsed');
$(this).children('.open').text('+');
}
});
// Handle the Menu state based on current Cookie values
$('#menu-sidebar > li').each(function() {
var cookieName = $(this).children('.heading').text().replace(/\+|-|\s/g,'')
var verticalNav = $.cookie( cookieName );
if (verticalNav == 'expanded') {
$(this).find('ul').show();
$(this).find('.open').text('-');
}
});
});
ここで実際に動作していることを確認するために、JSFiddle ページにすべての JavaScript と HTML + CSS を追加しました... http://jsfiddle.net/jasondavis/mvucU/