Hide navbar when li element is been clicked on

Question

Hey I'm having trouble hiding the navbar when we click on one of the element like contact or something.. I'm using HTML, JS and CSS..

        <div class="theme">
            <img class="darkThemeicon" src="assets/front/img/moon.png" alt="moon dark mode" id="icon">
        </div>
        <a href="#" class="hamburger" id="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <nav class="nav">
            <ul class="ul">
                <li class="li"><a class="list-link" href="#home">Home</a></li>
                <li class="li"><a class="list-link" href="#skills">Skills</a></li>
                <li class="li"><a class="list-link" href="#project">Project</a></li>
                <li class="li"><a class="list-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>```


    ```const hamburger = document.getElementById('hamburger');
    hamburger.addEventListener('click', function (e) {
        const ul = document.querySelector('nav > ul');
        ul.classList.toggle('menu-slide');
        hamburger.classList.toggle('cross');
    });
    
    function hideDiv() {
        document.getElementsByClassName('ul')[0].style.display = "none";
    }```

Answer 1

Your posted code does not include any part that would react to a click on the li elements. I have added the following:

document.querySelectorAll('li').forEach((li) => li.addEventListener('click', hideDiv));

 const hamburger = document.getElementById('hamburger'); hamburger.addEventListener('click', function (e) { const ul = document.querySelector('nav > ul'); ul.classList.toggle('menu-slide'); hamburger.classList.toggle('cross'); }); function hideDiv() { document.getElementsByClassName('ul')[0].style.display = "none"; } document.querySelectorAll('li').forEach((li) => li.addEventListener('click', hideDiv));

 <header> <div class="theme"> <img class="darkThemeicon" src="assets/front/img/moon.png" alt="moon dark mode" id="icon"> </div> <a href="#" class="hamburger" id="hamburger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a> <nav class="nav"> <ul class="ul"> <li class="li"><a class="list-link" href="#home">Home</a></li> <li class="li"><a class="list-link" href="#skills">Skills</a></li> <li class="li"><a class="list-link" href="#project">Project</a></li> <li class="li"><a class="list-link" href="#contact">Contact</a></li> </ul> </nav> </header>

Answer 2

You Just Need to call Your function in the HTML Code

 <ul class="ul">
            <li class="li"><a class="list-link" href="#home" onclick="hideDiv()">Home</a></li>
            <li class="li"><a class="list-link" href="#skills" onclick="hideDiv()">Skills</a></li>
            <li class="li"><a class="list-link" href="#project" onclick="hideDiv()">Project</a></li>
            <li class="li"><a class="list-link" href="#contact" onclick="hideDiv()">Contact</a></li>
        </ul>