Question

我在使用我的滑动条时出现问题，因为当我重新加载页面时，它会进入原来的状态。我需要它在php中的会话中存储一些值，但是我找不到任何方式让它工作，如果在刷新时关闭滑块我需要在页面加载时关闭它，但如果滑块打开之前刷新我需要在页面加载时打开sldiebar。

PHP：

<div id="sidebar" style="transform: translate(<?php
if($_SESSION['slide'] == 0) {
    echo '-100';
} else if($slide == 1) {
    echo '0';
} else {
    $_SESSION['slide'] = 0;
}
?>%,0);">

CSS：

#sidebar {
position:fixed;
width:25%;
min-width: 350px;
height:100%;
left: 0px;
background-color: #F2F2F2;
margin-top: 0px;
padding-top:40px;
overflow:hidden;

font-family:  "helveticaneue", "helvetica-neue", "helvetica", "lucida grande", "arial";
color: 444444;
}

JQuery的：

$(document).ready(function() {
var state = true;
$('#sidebar_button').click(function() {
    if(state) {
        $('#sidebar').css('transform', 'translate(0,0)');
        state = false;
    }
    else {
        $('#sidebar').css('transform', 'translate(-100%,0)');
        state = true;
      }
   });
});

我需要一些聪明的方法来解决它，因为当我点击<div id="sidebar_button">时我需要更改会话。

Answer 1

我的建议是使用cookie或localStorage。 LocalStorage是首选，更易于使用，但请先检查浏览器支持以确保它符合您的要求。这是一个例子：

$(document).ready(function() {
var state = localStorage.getItem('sidebarState') === "on";

function setState() {
    if(state) {
        $('#sidebar').css('transform', 'translate(0,0)');
        state = false;
    }
    else {
        $('#sidebar').css('transform', 'translate(-100%,0)');
        state = true;
   }
   localStorage.setItem('sidebarState',state ? "on" : "off");
}

$('#sidebar_button').click(setState);

setState();

});

如何通过刷新使我的滑动条保持位置

1 个答案: