Javascript Функция, которая работает только один раз

Question

У меня есть функция, которая переключает боковую панель, а другая - ее закрытие. Единственная проблема заключается в том, что он работает только один раз, и если я захочу снова переключить кнопку, он не будет работать.

const leftNav = document.querySelector('#left-nav');
const toggleBtn = document.querySelector('#toggle');
const content = document.querySelector('#content');
const closeNav = document.querySelector('.closebtn');


function show(){
        leftNav.style.width = '320px';
        content.style.marginLeft = '300px';
        toggleBtn.style.display = 'none';
}

function closingNav(){
        leftNav.style.display = 'none';
        content.style.marginLeft = '0px';
        toggleBtn.style.display = '';
}

Answer 1

Я думаю, что вы пропустили добавление стиля для панели leftNav в функции показа. В первый раз, когда он показывает, но, нажав один раз, вы нажимаете на функцию closeNav, вы добавляете стиль disply:none. вот почему он не показывает в следующий раз.

Чтобы решить эту проблему, вам нужно добавить свойство display:block в функцию show(). Вы можете использовать следующий код и попробовать:

function show(){
        leftNav.style.display = 'block';
        leftNav.style.width = '320px';
        content.style.marginLeft = '300px';
        toggleBtn.style.display = 'none';
}

function closingNav(){
        leftNav.style.display = 'none';
        leftNav.style.width = '0px';
        content.style.marginLeft = '0px';
        toggleBtn.style.display = 'inline-block';
}

Answer 2

// Лучше всего создать класс скрытия, добавить и удалить класс // скрытия.

    // CSS
    .hide {
       display: none;
    }
    #left-nav {
      width: 320px;
    }
    #content {
      margin-left: 300px
    }

const leftNav = document.querySelector('#left-nav');
const toggleBtn = document.querySelector('#toggle');
const content = document.querySelector('#content');
const closeNav = document.querySelector('.closebtn');


function show(){
        leftNav.class = ""
        toggleBtn.class = 'hide';
}

function closingNav(){
        leftNav.class = "hide"
        toggleBtn.class = '';
        content.style.marginLeft = '0px';      
}

<div id="left-nav">1</div>
<div id="content">2</div>
<div class="closebtn">3</div>
<button id="toggle">toggle</button>

Answer 3

Проблема в том, что вы не устанавливаете отображение стилей обратно на видимое. Исправить:

const leftNav = document.querySelector('#left-nav');
const toggleBtn = document.querySelector('#toggle');
const content = document.querySelector('#content');


function show(){
        leftNav.style.display = 'block';
        leftNav.style.width = '320px';
        content.style.marginLeft = '300px';
        toggleBtn.style.display = 'block';
}

function closingNav(){
        leftNav.style.display = 'none';
        content.style.marginLeft = '0px';
        toggleBtn.style.display = 'block';
}