Переключить изменение ширины 2 DIV за раз + localStorage - PullRequest
Новая
       31

Переключить изменение ширины 2 DIV за раз + localStorage

3 голосов
/ 12 июля 2020 

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>

Я пытаюсь уменьшить левую часть моего веб-сайта, чтобы пользователи могли иметь более широкую правую сторону, если они сочтут ее более удобной. Чего мне не хватает, так это способа, который позволил бы сделать выбор по всему сайту, когда загружается другая страница, до тех пор, пока пользователь не щелкнет снова. Может быть, решением было бы еще несколько строк в js с "localStorage"? Буду очень признателен за любую помощь.

Ответы [ 2 ]

1 голос
/ 12 июля 2020

Сделал ваш CSS немного лучше. Теперь нам нужно переключить только один класс .with_toggle на #section.

Он может сеять ошибки здесь, в сниппете, но отлично разветвляется на 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>
1 голос
/ 12 июля 2020

Конечно. Просто создайте переменную 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...