2

非常に単純なjQueryスライドダウンログインがあります。私の唯一の問題は、ユーザーが閉じるボタンをクリックするまでではなく、サイトのどこかのリンクがクリックされたときやページが更新されたときに、「再起動」したり戻ったりしたくないことです。これが可能かどうかはわかりません。

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown(2000, "easeOutBounce");
    }); 

    // Expand Panel
    $("#open").click(function(){
        $("body").slideDown("slow");
    }); 

    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp(2000, "easeInBack"); 
    });     

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });     
});
4

3 に答える 3

1

Cookie が下にスライドし、$(document).ready() 呼び出しごとにその Cookie が存在するかどうかを確認し、それに応じてパネルを開くと、Cookie を作成できます。

「javascript で Cookie を設定する方法」をグーグルで検索するか、Konstantin D の提案に従って $.cookie を使用できます。

明確に理解するために、コード内の私のコメントを参照してください。

$(document).ready(function() {


// see if cookie exists. if it does do the following
// $('div#panel').show();
// if it does not, you don't have to do anything

// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown(2000, "easeOutBounce");
    // now that it is opened, you should set your cookie here!

}); 

// Expand Panel
$("#open").click(function(){
    $("body").slideDown("slow");
}); 

// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp(2000, "easeInBack"); 
    // once it is closed by user, remember to delete the cookie.
});     

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
    $("#toggle a").toggle();
});
于 2012-10-01T05:06:01.133 に答える
0

クライアント UI で状態を永続化するには、Cookie などのローカル ストレージを使用する必要があります。jQuery cookie pluginを見てください。

Cookie が存在するかどうかを確認するチェックを追加し、存在する場合はパネルを展開して表示します。

コード：

if ($.cookie("isExpanded")) {
    $("div#panel").css('display', 'block');
}
于 2012-10-01T05:06:21.393 に答える
0

私はこのようなことをします：

$(document).ready(function() {
  if(loginOpen == true)
      $("div#panel").show();

   // Expand Panel
   $("#open").click(function(){
       $("div#panel").slideDown(2000, "easeOutBounce");
       $("body").slideDown("slow");
       loginOpen = true;
   }); 

   // Collapse Panel
   $("#close").click(function(){
       $("div#panel").slideUp(2000, "easeInBack"); 
       loginOpen = false;
   });     

   // Switch buttons from "Log In | Register" to "Close Panel" on click
   $("#toggle a").click(function () {
       $("#toggle a").toggle();
   });     
});

var loginOpen = false;
于 2012-10-01T05:14:25.833 に答える