Close menu when click on li

Question

Я делаю сайт на одной странице. Когда я открываю свое меню и нажимаю на элемент li, я хочу, чтобы мое меню закрылось.

На данный момент он работает, когда я нажимаю на «обложку меню-бургер», и я хочу установить то же самое, когда я нажимаю на элементы li.

Существует мой код:

$(document).ready(function() { 
 

 
    $('#menu-burger-wrapper').click(function(e) { 
 
     e.preventDefault(); 
 
     $this = $(this); 
 
     if ($this.hasClass('is-opened')) { 
 
      $this.addClass('is-closed').removeClass('is-opened'); 
 
     } else { 
 
      $this.removeClass('is-closed').addClass('is-opened'); 
 
     } 
 
    }) 
 
});

<nav class="menu-base" id="menu-base"> 
 
    <ul class="menu-item"> 
 
     <a id="en-cours" class="work_menu link link--over"> 
 
      <li>works</li> 
 
     </a> 
 
     <a class="about_menu link link--over"> 
 
      <li>about</li> 
 
     </a> 
 
     <a class="link link--over"> 
 
      <li>contact</li> 
 
     </a> 
 
    </ul> 
 
</nav> 
 
<!-- Header --> 
 
<div id="header"> 
 
    <!-- Menu --> 
 
    <div id="menu-burger-wrapper"> 
 
     <div id="menu-burger"> 
 
      <div class="line line-1"></div> 
 
      <div class="line line-2"></div> 
 
      <div class="line line-3"></div> 
 
     </div> 
 
    </div>

Answer 1

Вы можете использовать toggleClass для переключения класса.

Вы можете использовать , для разделения элементов, на которые вы хотите связать событие. не

$('#menu-burger-wrapper, .menu-item').on('click', function (e) { 
    e.preventDefault(); 
    $(this).toggleClass('is-opened is-closed'); 
}); 

$('.menu-item').on('click', 'li', function() { 
    $('#menu-burger-wrapper').trigger('click'); 
}); 

Демо: https://jsfiddle.net/tusharj/7c5nd7rj/1/

Answer 2

Попробуйте это - просто прикрепить обработчик щелчка к li элементов.

var clickHandler = function (e) { 
    e.preventDefault(); 
    $this = $(this); 
    if ($this.hasClass('is-opened')) { 
     $this.addClass('is-closed').removeClass('is-opened'); 
    } else { 
     $this.removeClass('is-closed').addClass('is-opened'); 
    } 
}; 

//attaching the event to both, together. 
$('#menu-burger-wrapper, ul.menu-item li').on('click', clickHandler);