How do i make my side navigation modul close when i click a link-CodePudding

I want to make the sidenavigation modul to close when i click the linkes inside the sidenav, the links works but it does not close the modul

index.html

  <!-- side navbar -->
<div  id="sidenav">
    <span  id="cancel-btn">
        <i ></i>
    </span>

    <ul >
        <li><a href="#header" id = "closemodal">home</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#rooms">rooms</a></li>
        <li><a href="#customers">customers</a></li>
    </ul>

</div>
<!-- end of side navbar -->

<!-- fullscreen modal -->
<div id="modal"></div>
<!-- end of fullscreen modal -->

script.js

const navBtn = document.getElementById('nav-btn');
const cancelBtn = document.getElementById('cancel-btn');
const sideNav = document.getElementById('sidenav');
const modal = document.getElementById('modal');

navBtn.addEventListener("click", function(){
    sideNav.classList.add('show');
    modal.classList.add('showModal');
});

cancelBtn.addEventListener('click', function(){
    sideNav.classList.remove('show');
    modal.classList.remove('showModal');
});

window.addEventListener('click', function(event){
    if(event.target === modal){
        sideNav.classList.remove('show');
        modal.classList.remove('showModal');
    }
});

i have tried adding this code from research but its not working

$(function(){
  $('#closemodal').click(function() {
    $('#sidenav').modal('hide');
});
})

CodePudding user response：

const navBtn = document.getElementById('nav-btn');
        const cancelBtn = document.getElementById('cancel-btn');
        const sideNav = document.getElementById('sidenav');
        const modal = document.getElementById('modal');

        navBtn.addEventListener("click", function(){
            sideNav.classList.add('show');
            cancelBtn.classList.add('show');
            modal.classList.add('showModal');
            navBtn.classList.remove('show');
            navBtn.classList.add('hide');
        });

        cancelBtn.addEventListener('click', function(){
            sideNav.classList.remove('show');
            cancelBtn.classList.remove('show');
            modal.classList.remove('showModal');
            navBtn.classList.remove('hide');
            navBtn.classList.add('show');
        });

        window.addEventListener('click', function(event){
            if(event.target === modal){
                sideNav.classList.remove('show');
                modal.classList.remove('showModal');
            }
        });

span{
            cursor: pointer;
        }
        .sidenav, .cancel-btn{
            display:none;
        }
        .show{
            display: block;
        }
        .hide{
            display: none;
        }

      <!-- side navbar -->
      <div>
        <span id ="nav-btn">
            <i  aria-hidden="true">☰</i>
        </span>
        <span  id="cancel-btn">
            <i  aria-hidden="true">X</i>
        </span>
      </div>
    <div  id="sidenav">   
        <ul >
            <li><a href="#header" id = "closemodal">home</a></li>
            <li><a href="#services">services</a></li>
            <li><a href="#rooms">rooms</a></li>
            <li><a href="#customers">customers</a></li>
        </ul>
    
    </div>
    <!-- end of side navbar -->
    
    <!-- fullscreen modal -->
    <div id="modal"></div>
    <!-- end of fullscreen modal -->

CodePudding user response：

const navBtn = document.getElementById('nav-btn');
        const cancelBtn = document.getElementById('cancel-btn');
        const sideNav = document.getElementById('sidenav');
        const modal = document.getElementById('modal');
        const list = document.getElementsByTagName('li');


        for (let i = 0; i < list.length; i  ) {
            list[i].addEventListener('click', function(){
                sideNav.classList.remove('show');
                cancelBtn.classList.remove('show');
                modal.classList.remove('showModal');
                navBtn.classList.remove('hide');
                navBtn.classList.add('show');
                });
        }

        navBtn.addEventListener("click", function(){
            sideNav.classList.add('show');
            cancelBtn.classList.add('show');
            modal.classList.add('showModal');
            navBtn.classList.remove('show');
            navBtn.classList.add('hide');
        });

        cancelBtn.addEventListener('click', function(){
            sideNav.classList.remove('show');
            cancelBtn.classList.remove('show');
            modal.classList.remove('showModal');
            navBtn.classList.remove('hide');
            navBtn.classList.add('show');
        });

        window.addEventListener('click', function(event){
            if(event.target === modal){
                sideNav.classList.remove('show');
                modal.classList.remove('showModal');
            }
        });

    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
    <style>
        span{
            cursor: pointer;
        }
        .sidenav, .cancel-btn{
            display:none;
        }
        .show{
            display: block;
        }
        .hide{
            display: none;
        }

      <!-- side navbar -->
      <div>
        <span id ="nav-btn">
            <i  aria-hidden="true">☰</i>
        </span>
        <span  id="cancel-btn">
            <i  aria-hidden="true">X</i>
        </span>
      </div>
    <div  id="sidenav">   
        <ul >
            <li><a href="#header" id = "closemodal">home</a></li>
            <li><a href="#services">services</a></li>
            <li><a href="#rooms">rooms</a></li>
            <li><a href="#customers">customers</a></li>
        </ul>
    
    </div>
    <!-- end of side navbar -->
    
    <!-- fullscreen modal -->
    <div id="modal"></div>
    <!-- end of fullscreen modal -->