-2

以下のコードを使用してナビゲーションメニューをスライドしています

$(document).ready(function(){
 $("#flipnav").click(function(){
    $("nav").slideToggle("slow");
    }); 
});

ただし、別のページを参照したり、更新したりすると、ナビゲーションが再び表示されます。しかし、ユーザーがクリックしてナビゲーションを再度表示するまでナビゲーションが非表示のままになり、別のページを参照しても同じ（非表示）のままになるように、この変更を保持するにはどうすればよいですか？

さらに遠く

if(sessionStorage["navigationMoved"]== "true"){

  $(document).ready(function(){
 $("#flipnav").ready(function(){
    $("nav").slideToggle("slow");
    }); 
}); 

 $(document).ready(function(){
$('#flipnav').toggle(function(){
  $('#content').animate({
   top:"0%"
 });
}, 

function(){
  $('#content').animate({
  top:"2%"
  });     
});
});

}
4

2 に答える 2

1

メニューの変更を各ページのHTMLに直接ハードコーディングするか、それが不可能な場合はCookieまたはローカルストレージを使用します。これは、HTMLがステートレスであり、新しいページの読み込み後に行った変更を記憶していないためです。

編集：

Jeezes

すべてのslideToggleにメニューが表示されているかどうかを保存し、ページロードでその値を確認して、それに応じてメニューを設定する必要があります。

var isSet = localStorage.getItem('nav');
document.getElementsByTagName('nav')[0].style.display = isSet ? 'block' : 'none';

$(document).ready(function () {
    $("#flipnav").click(function () {
        $("nav").slideToggle("slow", function() {
            localStorage.setItem('nav', $("nav").is(':visible'));
        });
    });
});

私はlocalStorageを使用する傾向がありますが、sessionStorageは同じHTML5 WebストレージAPIの一部であるため、セッションのみの永続性が必要な場合は、これを使用できます。

古いブラウザの場合、 MDNにはCookieにフォールバックするポリフィルがあるため、サポートされていないブラウザについて心配することなく、Webストレージ構文を一貫して使用できます。

于 2013-03-24T18:04:40.500 に答える
0

ページが読み込まれたときにチェックを行い、アクションをリセットする必要があります。sessionStorageを使用して、ページの再読み込みや変更を超えて情報を保存できます。

それで

$(document).ready(function(){
 $("#flipnav").click(function(){
    $("nav").slideToggle("slow");
    }); 
    sessionStorage["navigationMoved"] = true;
});

次に、新しいページを読み込むときに、次のようなコードが必要になります

if(sessionStorage["navigationMoved"]){
    $(document).ready(function(){
       $("#flipnav").click(function(){
       $("nav").slideToggle("slow");
     }); 
     }); 
}

ページをリロードすると、提供されたHTML / Javascript/CSSに基づいてサイトが完全に再レンダリングされます。したがって、情報を明示的に保存して確認しない限り、以前の状態を「記憶」しません。

于 2013-03-24T18:04:58.330 に答える