一次切换 2 DIV 宽度 + localStorage

Question

function myFunction() {
   var element = document.getElementById("one1");
   element.classList.toggle("one2");
   var element = document.getElementById("two1");
   element.classList.toggle("two2");
}

<style>
#section{margin-left:50px;
margin-right:50px
}
#monbouton{float:right;
font-size:25px;
width:50px;
height:50px;
background-color:#F1F1F1;
border:1px solid ##F1F1F1
}
#one1{
float:left;
width:40%;
height:100px;
border:1px solid blue
}
.one2{
width:10% !important;
height:200px;
border:1px solid red !important;
}
.one2 #afairedisparaitre{display:none
}
#two1{float:right;
width:59%;
height:100px;
border:1px solid green
}
.two2{width:89% !important
}
</style>

<!DOCTYPE html>
<html>
<body>
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">&#8596;</button>
    <div id="afairedisparaitre">This is DIV #one1<br />
    Button toggle to CLASS .one2<br />
  and reverse</div>
</div>
  <div id="two1">This is DIV #two1<br />
  Button toggle to CLASS .two2<br />
  and reverse</div>
</div>
</body>
</html>

我正在尝试缩小我网站的左侧，以便用户可以在觉得更舒适的情况下拥有更宽的右侧。我缺少的是一种在加载其他页面时将选择保留在整个站点的方法，直到用户再次单击为止。也许解决方案是在带有“localStorage”的js中多几行？如果有任何帮助，我将不胜感激。

Answer 1

当然可以。只需创建一个 localStorage 变量来跟踪收缩是否应该处于活动状态，并使用它在页面加载或类似的情况下应用您的样式。

function shrinkActive() {
  var shrink;
  if (!(shrink = localStorage.getItem("shrink"))) {
    localStorage.setItem("shrink", "false");
    return false;
  }

  return JSON.parse(shrink);
}

function setShrink(active) {
  var element1 = document.getElementById("one1");
  var element2 = document.getElementById("two1");
  
  if (active) {
    element1.classList.add("one2");
    element2.classList.add("two2");
  } else {
    element1.classList.remove("one2");
    element2.classList.remove("two2");
  }
  
  localStorage.setItem("shrink", active.toString());
}

function myFunction() {
  setShrink(!shrinkActive());
}

window.onload = function() {
  setShrink(shrinkActive());
}

Link 到工作代码笔。 https://codepen.io/bugcatcher9000/pen/pogZbrz?editors=1111

Answer 2

让您的 CSS 变得更好了。现在我们只需要为 #section.

切换一个 class .with_toggle

它可以在 Snippet 中播下错误，但可以在 Codepan 上分叉，请参阅。尝试切换它并重新加载 Codepan 上的页面。

// checking if our storage is not empty
if (localStorage.toggled != '') {
  // set class to #section form storage value
  document.getElementById("section").classList.toggle(localStorage.toggled);
}

function myFunction() {
  if (localStorage.toggled != "with_toggle") {
    document.getElementById("section").classList.add("with_toggle");
    localStorage.toggled = "with_toggle";
  } else {
    document.getElementById("section").classList.remove("with_toggle");
    localStorage.toggled = "";
  }
}

#section {
  margin-left: 50px;
  margin-right: 50px;
}

#monbouton {
  float: right;
  font-size: 25px;
  width: 50px;
  height: 50px;
  background-color: #F1F1F1;
  border: 1px solid #F1F1F1;
}

#one1 {
  float: left;
  width: 40%;
  height: 100px;
  border: 1px solid blue;
}

.with_toggle #one1 {
  width: 10%;
  border: 1px solid red;
}

.with_toggle #one1 #afairedisparaitre {
  display: none;
}

#two1 {
  float: right;
  width: 59%;
  height: 100px;
  border: 1px solid green;
}

.with_toggle #two1 {
  width: 89%;
}

<div id="section">
  <div id="one1">
    <button id="monbouton" onclick="myFunction()">&#8596;</button>
    <div id="afairedisparaitre">This is DIV #one1<br /> Button toggle to CLASS .one2<br /> and reverse</div>
  </div>
  <div id="two1">This is DIV #two1<br /> Button toggle to CLASS .two2<br /> and reverse</div>
</div>

一次切换 2 DIV 宽度 + localStorage

Toggle change 2 DIV width at a time + localStorage

javascript

css

toggle

switch-statement