Как я могу исправить слайд навигации

Question

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

let openNav = document.querySelector(".slideOpen");
    let closeNav =  document.querySelector(".slideClose");
    document.addEventListener("click", () => {
        openNav.style.width = "250px";
    });
    document.addEventListener("click", () => {
        closeNav.style.width = "0";
    });

.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slideOpen a:hover { color: #f1f1f1; }

.slideOpen .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; } 

<div style="font-size:30px;cursor:pointer">&#9776; open</div> 
<div class="slideOpen"> <ul>
    <li> <a href="#" class="slideClose">&times;</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Services</a> </li>
    <li> <a href="#">Clients</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul> </div>

Answer 1

Вы делаете addEventListener для всего document, вместо этого делаете для определенного элемента (открывать и закрывать) ..

Изменения:

Добавлен новый класс openMenu в открыть элемент меню, например,

<div style="font-size:30px;cursor:pointer" class="openMenu">&#9776; open</div>

Затем добавили новую переменную для хранения элемента, например,

let open = document.querySelector(".openMenu");

Затем изменили document.addEventListener с open и closeNav соответственно, как,

open.addEventListener("click", () => {
    openNav.style.width = "250px";
});
closeNav.addEventListener("click", () => {
    openNav.style.width = "0";
});

И измененный фрагмент выглядит так:

    let openNav = document.querySelector(".slideOpen");
    let open = document.querySelector(".openMenu");
    let closeNav =  document.querySelector(".slideClose");
    open.addEventListener("click", () => {
        openNav.style.width = "250px";
    });
    closeNav.addEventListener("click", () => {
        openNav.style.width = "0";
    });

.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slideOpen a:hover { color: #f1f1f1; }

.slideOpen .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; } 

<div style="font-size:30px;cursor:pointer" class="openMenu">&#9776; open</div> 
<div class="slideOpen"> <ul>
    <li> <a href="#" class="slideClose">&times;</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Services</a> </li>
    <li> <a href="#">Clients</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul> </div>

Answer 2

Вам необходимо добавить actionListeners на кнопки (ссылки), а не на документ.

let slide = document.querySelector(".slide");
let slideOpen = document.querySelector(".slideOpen");
let slideClose =  document.querySelector(".slideClose");
    slideOpen.addEventListener('click', function(event) {
        slide.style.width = "250px";
    });
    slideClose.addEventListener("click", () => {
        slide.style.width = "0";
    });

.slide { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slide a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slide a:hover { color: #f1f1f1; }

.slide .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; } 

<div style="font-size:30px;cursor:pointer" class="slideOpen">&#9776; open</div> 
<div class="slide"> <ul>
    <li> <a href="#" class="slideClose">&times;</a> </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">Services</a> </li>
    <li> <a href="#">Clients</a> </li>
    <li> <a href="#">Contact</a> </li>
  </ul> </div>