Блог

У меня есть боковая панель, и у меня есть 2 функции. Один открывает его, а другой закрывает.

Вот эти две функции.

 function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}
 

Я хочу создать условие между обоими, чтобы я мог переключать их, но для этого мне нужно определить, открыто оно или закрыто.

Как я могу обнаружить это, чтобы я мог создать функцию переключения, вызывающую функции, описанные выше?

Вам не нужны две функции. Вы можете сделать это с помощью всего одного класса CSS и одной функции, которая переключает этот один класс на элемент боковой панели.

Чтобы сделать это, добавьте значение по умолчанию width 0% на боковой панели, а затем создайте другой класс, назовем его lets .sidebarToggle , который изменяет значение width to 100% .

В javascript вам просто нужна одна функция, давайте назовем ее toggleSidebar() , которая просто переключает .sidebarToggle класс. Таким образом, вам не только потребуется меньше кода, но и не нужно беспокоиться о проверке того, открыта или закрыта боковая панель.

Лучшее решение

Лучшим подходом является изменение transform свойства боковой панели вместо width . Изменение transform свойства, в этом случае, лучше по сравнению с изменением width , потому что, если вы измените width , вам придется обрабатывать:

• изменение размера дочерних элементов боковой width панели по мере увеличения или уменьшения боковой панели.
• удалите левую или правую padding (если они есть) на боковой панели, когда width на боковой панели находится 0px или 0% . Если вы не удалите padding , боковая панель не будет полностью скрыта на 0px или 0% width .

Вам transform не нужно беспокоиться о вышеупомянутых моментах, потому что вместо изменения размера мы просто переводим боковую панель из одной точки в другую.

Анимация transform свойства также более эффективна по сравнению с анимацией width свойства, потому что изменение transform свойства не заставляет браузер проходить этапы компоновки и рисования своего критического пути рендеринга, тогда как изменение width свойства заставит браузер снова пройти эти шаги.

Следующий фрагмент кода показывает пример:

 const btn = document.querySelector('button');
const sidebar = document.querySelector('.sidebar');

btn.addEventListener('click', () => {
  sidebar.classList.toggle('sidebarToggle');
}); 

 body {
  margin: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  background: #666;
  color: #fff;
  padding: 15px 25px;
  box-sizing: border-box;
  width: 30%;
  height: 100vh;
  transform: translateX(-100%);
  position: absolute;
  transition: transform 0.5s ease;
}

span {
  margin: 5px 0;
}

.sidebarToggle {
  transform: translateX(0);
}

button {
  position: absolute;
  right: 0;
  background: green;
  color: #fff;
  padding: 15px 25px;
} 

 <div class="sidebar">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  <span>Item 4</span>
</div>

<button>Toggle Sidebar</button> 

Лучше всего это делать с помощью классов. Таким образом, stying лучше отделяется от поведения, и в него даже встроена функция переключения:

 document.getElementById("button").onclick = function() {
   document.getElementById("myNav").classList.toggle("width100");
}; 

 #myNav {
   background-color: red;
   display: block;
   height: 100px;
   width: 0%;
}

#myNav.width100 {
   width: 100%;
} 

 <nav id="myNav"></nav>
<button id="button">Toggle</button>