切换一次更改 2 个 DIV 宽度 + localStorage答案

【问题标题】：Toggle change 2 DIV width at a time + localStorage切换一次更改 2 个 DIV 宽度 + localStorage
【发布时间】：2020-07-12 16:52:48
【问题描述】：

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 中多写几行？非常感谢任何帮助。

【问题讨论】：

对不起，我想我错误地删除了我的答案......我想热烈感谢你的回答。我试图实施你的建议，但它不起作用，我可能忘记了一些东西......请在这里找到一个链接，因为它需要 2 个页面来查看即使在加载新页面后它是否保持用户的选择lepointdufle.net/toggl1.htm 谢谢你的帮助

标签： javascript css switch-statement toggle

【解决方案1】：

让你的 CSS 更好一点。现在我们只需要为#section 切换一个类.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 页才能使其正常工作，因此我允许自己将此链接发送给您，以便您更好地了解lepointdufle.net/toggl1.htm
这里 <div id="section" class="with_toggle"> 从您的示例站点中删除 class="with_toggle"。您不需要在 HTML 中添加该类，它只会通过脚本添加。一切都会完美，刚刚经过测试。如果答案有用 - 不要忘记投票并检查是否已接受。
把它放在 HTML <script> if (localStorage.toggled != '') { // set class to #section form storage value document.getElementById("section").classList.toggle(localStorage.toggled); } </script> 中的 #section 块之后，不会有闪烁效果。试试看是否可以
我的意思不是单独的 JS 文件，而是 HTML 中的 Javascript。正如我所说，尝试将此代码放在 HTML <script> if (localStorage.toggled != '') { // set class to #section form storage value document.getElementById("section").classList.toggle(localStorage.toggled); } </script>
您可以保留单独的JS文件。只需在 HTML 右侧添加更多代码。

【解决方案2】：

当然。只需创建一个 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());
}

链接到工作的 Codepen。 https://codepen.io/bugcatcher9000/pen/pogZbrz?editors=1111

【讨论】：

不错的一个，但我的更短并且有点优化。尝试使用代码片段或代码盘，以提高答案的质量。
非常感谢您的回答！！不幸的是它不再缩小了，我可能忘记了什么。我在上面的答案中找到了解决方案。再次感谢，祝你一切顺利:-)