Попытка получить навигацию для переключения закрытия после того, как элемент li был выбран

Question

Я хочу, чтобы меню автоматически закрывалось после того, как элемент меню был нажат. И я хочу, чтобы у пользователя все еще была возможность снова переключать меню. Мне удалось заставить элемент исчезнуть после щелчка элемента с помощью $('#overlay').toggleClass();, но теперь у пользователя больше нет возможности снова щелкнуть меню. Я пробовал погулять, но не могу найти ясного ответа. Я новичок в JavaScript. Кто-то может указать мне в правильном направлении.

Ссылка на примере http://codepen.io/anon/pen/KpRmgE

HTML

<div class="button_container" id="toggle"> 
    <span class="top"></span> 
    <span class="middle"></span> 
    <span class="bottom"></span> 
</div> 

<div class="overlay" id="overlay"> 
    <nav class="overlay-menu"> 
    <ul> 
     <li ><a href="#home">Home</a></li> 
     <li><a href="#portfolio">Port</a></li> 
     <li><a href="#about">Work</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </nav> 
</div> 

<section id="home"> 
    <p>First</p> 
</section> 
<section id="portfolio"> 
    <p>Second</p> 
</section> 
<section id="about"> 
    <p>Third</p> 
</section> 
<section id="contact"> 
    <p>Fourth</p> 
</section> 

JavaScript

$('#toggle').click(function() { 
    $(this).toggleClass('active'); 
    $('#overlay').toggleClass('open'); 
    $("nav li").click(function() { 
     $('#overlay').toggleClass(); 
    }); 
}); 

Answer 1

Вы не были далеко ... только несколько ошибочно помещенные звонки внутри обработчика щелчка.

Попробуйте это:

$('#toggle').click(function() { 
    $(this).toggleClass('active'); 
    $('#overlay').toggleClass('open'); 
}); 
$("nav li").click(function() { 
    $('#overlay').toggleClass('open'); 
    $('#toggle').toggleClass('active'); 
}); 

Раздвоенный codepen

Answer 2

Вы также можете сделать это таким образом, чтобы сделать ваш обработчик события более ясно:

$('#toggle').click(function() { 
// Adding classes, waiting for a click 
$(this).addClass('active'); 
$('#overlay').addClass('open'); 
$("nav li").click(function() { 
    // Clicked! Removing classes 
    $('#overlay').removeClass('open'); 
    $('#toggle').removeClass('active'); 
}); 

}); Я лично обычно использую функции addClass и removeClass, когда вы выполняете такое конкретное действие. Это поможет вам избежать небольших ошибок, которые могут занять много времени. :)