Close menu by clicking link

Question

I’m making a menu, and when the user clicks on the link it should close. But this is only happening when I click on the hamburger icon.

Here is the code:

(function ($) {
    "use strict";

    var app = function () {
        var body = undefined;
        var menu = undefined;
        var menuItems = undefined;

        var init = function init() {
            body = document.querySelector('body');
            menu = document.querySelector('.menu-icon');
            menuItems = document.querySelectorAll('.nav__list-item');
            applyListeners();
        };

        var applyListeners = function applyListeners() {
            menu.addEventListener('click', function () {
                return toggleClass(body, 'nav-active');
            });
        };

        var toggleClass = function toggleClass(element, stringClass) {
            if (element.classList.contains(stringClass)) element.classList.remove(stringClass);
            else element.classList.add(stringClass);
        };

        init();
    }();
})(jQuery);

<header class="cd-header">
    <div class="header-wrapper">
        <div class="logo-wrap">
            <a href="#" class="hover-target"><span>cu</span>logo</a>
        </div>
        <div class="nav-but-wrap">
            <div class="menu-icon hover-target">
                <span class="menu-icon__line menu-icon__line-left"></span>
                <span class="menu-icon__line"></span>
                <span class="menu-icon__line menu-icon__line-right"></span>
            </div>
        </div>
    </div>
</header>

<div class="nav">
    <div class="nav__content">
        <ul class="nav__list">
            <li class="nav__list-item active-nav"><a href="#b">home</a></li>
            <li class="nav__list-item"><a href="#a" class="hover-target">studio</a></li>
            <li class="nav__list-item"><a href="#" class="hover-target">news</a></li>
            <li class="nav__list-item"><a href="#" class="hover-target">contact</a></li>
        </ul>
    </div>
</div>

Any idea how I can do this?

Answer 1

I confess that I did not understand the relation of the codes posted along with the question and the question. A mixture of jQuery with Javascript, Anyway. But, if you want that when clicking on the link the menu appears or disappears, you can do as in the example below

$(function(){
  $('a').on('click', function() {
    $('.nav').toggle();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header class="cd-header">
    <div class="header-wrapper">
        <div class="logo-wrap">
            <a href="#" class="hover-target"><span>cu</span>logo</a>
        </div>
        <div class="nav-but-wrap">
            <div class="menu-icon hover-target">
                <span class="menu-icon__line menu-icon__line-left"></span>
                <span class="menu-icon__line"></span>
                <span class="menu-icon__line menu-icon__line-right"></span>
            </div>
        </div>
    </div>
</header>

<div class="nav">
    <div class="nav__content">
        <ul class="nav__list">
            <li class="nav__list-item active-nav"><a href="#b">home</a></li>
            <li class="nav__list-item"><a href="#a" class="hover-target">studio</a></li>
            <li class="nav__list-item"><a href="#" class="hover-target">news</a></li>
            <li class="nav__list-item"><a href="#" class="hover-target">contact</a></li>
        </ul>
    </div>
</div>