为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

尚方宝剑之说 2022-11-11 13:06:01
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 回答

?
浮云间

TA贡献1829条经验 获得超3个赞

让你的 CSS 更好一点。现在我们只需要.with_toggle为#section.


它可以在这里,在 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>


查看完整回答
反对 回复 2022-11-11
?
MM们

TA贡献1886条经验 获得超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


查看完整回答
反对 回复 2022-11-11
  • 2 回答
  • 0 关注
  • 49 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信