Question

这是我的第一个问题，所以我希望我做对了。

我有一个非常简单的jQuery slidedown登录。我唯一的问题是，当我点击网站上任何地方的链接和/或刷新页面时，我希望它不会“重新启动”/重新启动，直到用户点击关闭按钮。不确定这是否可行。

$(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();
    });     
});

Answer 1

您可以在向下滑动时创建一个cookie，并在每个$（文档）.ready（）调用上查看该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();
});

Answer 2

为了在您的客户端UI中保持状态，您可能希望使用一些本地存储，如cookie。看看jQuery cookie plugin。

您可以添加一项检查以查看Cookie是否存在以及是否显示扩展的面板。

代码：

if ($.cookie("isExpanded")) {
    $("div#panel").css('display', 'block');
}

Answer 3

我会做这样的事情：

$(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;

点击后jQuery滑落到不隐藏？

3 个答案: