Question

我是一个关于JS的新手，主要使用bootstrap就绪解决方案，但现在我想为我的方面实现一个侧边栏（过滤）。

因此，点击过滤器，内容也会根据该内容和页面网址进行更改，因此侧边栏会关闭。

我想做的是，边栏保持打开状态，直到用户点击X ..

我使用了W3School侧栏教程，所以这是我的代码：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>

JavaScript的：

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}

CSS

/* The side navigation menu */
.sidenav {

    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
   font-size: 20px;
   padding:5px 10px 5px 10px;
    text-decoration: none !important;    
    color: #818181;
    background: transparent;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.sidenav .removebtn {
    color: #e9e9e9;
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 20px;
    margin-right: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

我看到了一些解决方案，包括Cookies，但作为JS中的菜鸟，我想要一个我能理解的答案。

谢谢！

Answer 1

因此，如果我理解正确，您希望在页面更改时保持栏。

当页面重新加载到另一个页面时，浏览器从服务器获取一个新的html（即使它是相同的），并且孔页面重置，因此侧栏状态重置。

您可以将侧栏的状态保存到某个位置，以便在页面再次加载后可以检索它。 Javascript可以访问2个存储，Cookies和LocalStorage。

Cookie与服务器共享（浏览器会根据每个请求将所有Cookie发送到服务器）而localStorage只能通过javascript访问。

服务器通常不关心边栏是打开还是关闭，因此要使用的“正确”存储是localStorage。（w3schools http://www.w3schools.com/html/html5_webstorage.asp中的LocalStorage）

现在解决您的问题，

您需要保存侧边栏状态，以便在关闭或打开侧边栏时更新状态：

function openNav() {
    ...
    // If localStorage is supported by the browser
    if (typeof(Storage) !== "undefined") {
        // Save the state of the sidebar as "open"
        localStorage.setItem("sidebar", "opened");
    }
    ...
}

function closeNav() {
    ...
    // If localStorage is supported by the browser
    if (typeof(Storage) !== "undefined") {
        // Save the state of the sidebar as "open"
        localStorage.setItem("sidebar", "closed");
    }
    ...
}

现在我们已经保存了状态，我们需要在每次浏览器加载页面时进行检查。我们需要快速完成，所以我们不想等待像onload事件这样的任何事件。我们只需要在页面上加载侧边栏元素，而不是所有页面，因此我们可以在侧边栏元素下输入我们的代码。

<!-- The sidebar element -->
<div id="mySidenav" class="sidenav">...</div>
<!-- Right after the browser renders the sidebar -->
<script type="text/javascript">
    // If localStorage is supported by the browser
    if (typeof(Storage) !== "undefined") {
        // If we need to open the bar
        if(localStorage.getItem("sidebar") == "opened"){
            // Open the bar
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
        }
    }
</script>

这有两个问题，

必须支持LocalStorage。（谷歌Chrome 4.0 +，Internet Explorer 8.0 +，Firefox 3.5 +，Safari 4.0 +，Opera 11.5 +）
由于transition: .5s; css规则，它会重播动画。

可以通过在类上添加transition: .5s;并使用javascript临时删除它来解决第二个问题，直到您打开侧边栏。

<!-- The sidebar element -->
<div id="mySidenav" class="sidenav">...</div>
<!-- Right after the browser renders the sidebar -->
<script type="text/javascript">
    // If localStorage is supported by the browser
    if (typeof(Storage) !== "undefined") {
        // If we need to open the bar
        if(localStorage.getItem("sidebar") == "opened"){
            // Remove class with transition from the 'sidebar' and the 'main'
            ...
            // Open the bar
            document.getElementById("mySidenav").style.width = "250px";
            document.getElementById("main").style.marginLeft = "250px";
            // Add the transition class again
            ...
        }
    }
</script>

使用Cookie

Javascript不会像访问本地存储一样访问Cookie。

您可以将Cookie视为可以从变量访问的大字符串在document.cookie上（所有文件Cookie都在这里）

您可以在控制台中看到此变量

> document.cookie
"a_cookie_name=cookie_value; an_other_cookie_name=and_his_value; ..."

要保存cookie，您只需要

// Add/Update a cookie by name
document.cookie = name + "=" + value + ";"

这不会清除旧的Cookie，它只会添加一个新的Cookie，如果存在，则会更新它。

但是获取它们的值有点困难...你必须在变量中获取字符串，将字符串拆分为“;”以便你有一个字符串数组，其中数组的每个项目都是一个cookie ，并在阵列中搜索你的cookie ......太麻烦了。

但我们不必重新发明轮子......所以我们可以使用w3schools' code

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

现在我们使用localStorage，我们使用上面的函数

localStorage.getItem("sidebar")等效于getCookie("sidebar")

localStorage.setItem("sidebar","<value>")等效于setCookie("sidebar", "<value>", 30)

（请注意，由于Cookie过期，我们将其设置为在30天后过期，因此要删除Cookie，请将过期日期设置为之前的时间-1）

最好在w3schools和localStorage上查看有关Cookie的详情。

Answer 2

在这里，一个非常简单的例子。您可以根据自己的需要设计一切。如果您有任何疑问，请与我们联系。

$('.btn').click(function() {
  $('.sidenav').toggleClass('comeBack');
});

* {
  margin: 0;
  padding: 0;
  border: 0;
}
.sidenav {
  height: 100%;
  width: 200px;
  z-index: 1;
  background-color: #ccc;
  overflow-x: hidden;
  transition: 0.5s;
  transform: translateX(-300px);
}
.sidenav a {
  font-size: 20px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  color: #818181;
  background: transparent;
  display: block;
  transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}
.btn {
  cursor: pointer;
  outline: none;
  height: 30px;
  width: 100px;
  border-radius: 10px;
}
.btn:hover {
 color: white;
}
.comeBack {
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class='btn'>
  Toggle menu
</button>

<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

javascript侧边栏在页面更改时保持打开状态

2 个答案:

使用Cookie