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 是否存在并相应地打开面板。

您可以在 Google 上搜索“如何使用 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 插件。

您将添加一个检查以查看 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 回答