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

Question

Решение Javascript Я ищу должен выполнить следующее: меню

1. Переключение с открытым Offscreen Переключить

2. Выберите меню ссылку якорный тег, который переходит на закрепленном раздел на той же странице

3. меню переключения закрывает

Это полный код Fidd ле демонстрирует вопрос: https://jsfiddle.net/fpbs6fkz/

ПРИМЕЧАНИЕ: Дополнительный JS + CSS слишком длинные, чтобы отправить на переполнение стека **

Проблематика JavaScript:

// Find all menu links 
var navLinks = document.querySelectorAll('.c-menu__link'); 
// For each menu link 
var index = 0, length = navLinks.length; 
for (; index < length; index++) { 
    // Attach click event, on click call close function 
    navLinks[index].addEventListener('click', 
     function() { 
      slideLeft.close(); 
     } 
    ); 
} 

Выше Javascript функция, которая должна закрывать меню переключения каждый раз, когда я нажимаю на ссылку привязки и перехожу к разделу желания, но он вообще не работает.

HTML:

<!-- Start of Slidesmenu --> 
<div class="mobilemenu"> 
    <div class="wsmenucontent overlapblackbg"></div> 
    <div class="wsmenuexpandermain slideRight"> 
    <a id="navToggle" class="animated-arrow slideLeft"><span></span></a> 
    <a href="#" class="smallogo"><img src="assets/img/logo4.png" width="120" style= "margin-top:-5px;" alt="" /></a> 

    </div> 

    <nav id="c-menu--slide-left" class="wsmenu slideLeft"> 
    <ul class="mobile-sub wsmenu-list">       
    <li class="c-menu__item"><a href="#about" class="c-menu__link active"><i class="fa fa-home"></i>About</a></li> 
    <li class="c-menu__item"><a href="#contact" class="c-menu__link"><i class="fa fa-road"></i>Contatc</a></li> 
    <li class="c-menu__item"><a href="#fhowitworks" class="c-menu__link"><i class="fa fa-flask"></i>How it Works</a></li> 
    <li class="c-menu__item"><a href="#tools" class="c-menu__link"><i class="fa fa-puzzle-piece"></i>Tools</a></li> 
    <li class="c-menu__item"><a href="#help" class="c-menu__link"><i class="fa fa-wrench"></i>Help</a></li> 
    <li class="c-menu__item"><a href="#customers" class="c-menu__link"><i class="fa fa-server"></i>Customers</a></li> 
    <li class="c-menu__item"><a href="#business" class="c-menu__link"><i class="fa fa-lock"></i>Business</a></li> 
    <li class="c-menu__item"><a href="#location" class="c-menu__link"><i class="fa fa-users"></i>Location</a></li> 
    <li class="c-menu__item"><a href="contact.html" class="c-menu__link"><i class="fa fa-envelope-o"></i>Contact</a></li> 
    </ul> 
    </nav> 
</div> 
<div id="about"><p>About</p></div> 
<div id="contact"><p>Contact</p></div> 
<div id="howitworks"><p>How it Works</p></div> 
<div id="tools"><p>Tools</p></div> 
<div id="help"><p>Help</p></div> 
<div id="customers"><p>Customers</p></div> 
<div id="business"><p>Business</p></div> 
<div id="location"><p>Location</p></div> 

<script>window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.11.2.min.js"><\/script>')</script> 

Так что мой вопрос:

Как исправить код JavaScript, чтобы меню переключения закрывается, и переходит к привязанному секции, когда я выбираю меню ссылку якоря?

Answer 1

Несмотря на ужасающее расположение кода и obfusticated JavaScript, вы можете просто заменить:

slideLeft.close(); 

с

$("#navToggle").click() 

Я обычно говорю вам повторно использовать обработчик события щелчка для #navToggle, но он скрыт.

Для более решения «Jquery», замените весь JavaScript (что вы включили в этом вопросе и, не скрыт в скрипке) с:

$(".c-menu__link").click(function() { $("#navToggle").click() }) 

Обновлено скрипка: https://jsfiddle.net/wqd39kL2/1/