Javascript Eventlistener необходимо обновить после использования

Question

Я учу JavaScript. Я попытался реализовать простое наложение, которое переключается при нажатии кнопки и закрывается после нажатия кнопки закрытия.

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

Вот код:

 <a href="#" class="fadeInRight wow btn btn-border btn-lg "  onclick="openNav()" data-wow-delay=".6s">Explore More</a>

Это кнопка с функцией openNav ()

<div id="myNav" class="overlayed">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 <div>overlay content</div>
 </div>
 <script type="text/jscript">
    function openNav() {

   var element = document.getElementById("myNav");
   element.classList.toggle("opened");
   }


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


  }
 </script>

открыл класс с контентом CSS

    .opened
   {
     width: 100%;
     height:100%;
     transition: width 6s, height 4s;
     opacity: 1;
   }

Thankyou

Answer 1

В дополнение к ответам, показывающим, как сбросить ширину, когда вы хотите снова открыть элемент, согласно вопросу.

Было бы лучше использовать: display: none и использовать класс скрытия. Это позволит убрать элемент, который вы хотите скрыть, из потока страниц и не дать ему мешать другим элементам, пока он скрыт.

.hide { display:none }

Затем добавьте / удалите этот класс из элемента, который вы хотите скрыть / показать следующим образом:

element.classList.toggle("hide");

Answer 2

Это потому, что функция closeNav устанавливает ширину 0. На самом деле вам не нужны две функции openNav и closeNav. Вы уже используете toggle. Так что одной функции будет достаточно

function toggleDisplay() {
    var element = document.getElementById("myNav");
    element.classList.toggle("opened");
   }

Answer 3

Ваше событие нажатия по-прежнему прикреплено к вашей кнопке, и оно все еще работает, но функции, которые вы вызываете, открывают и закрывают наложение, изменяют стиль.

Функция, которая открывает оверлей, присоединяет класс css к myNav.

Функция, которая закрывает оверлей, устанавливает ширину myNav в 0%.

function openNav() {

    var element = document.getElementById("myNav");
    element.classList.toggle("opened");
    element.style.width = "100%"; // or whatever width you need

}


function closeNav() {
    var element = document.getElementById("myNav");
    element.classList.toggle("opened"); //to remove the class, or use .remove explicitly
    element.style.width = "0%";

}

Но на самом деле вам не нужно изменять ширину элемента, если вы добавите или удалите класс opened, этого будет достаточно.

function openNav() {

    var element = document.getElementById("myNav");
    element.classList.toggle("opened");
  //  element.style.width = "100%"; // or whatever width you need

}


function closeNav() {
    var element = document.getElementById("myNav");
    element.classList.toggle("opened"); //to remove the class, or use .remove explicitly
   // element.style.width = "0%";

}

Answer 4

в функции closeNav, почему вы устанавливаете ширину 0%? вместо этого переключите класс .open

element.classList.toggle("opened");

это удалит открытый класс css.

Answer 5

Ну, на самом деле вы устанавливаете ширину 0% при закрытии. Этот стиль является встроенным, и он останется даже при повторном нажатии кнопки «Открыть».

Вместо этого вы должны удалить «открытый» класс, который вы добавили при открытии.