选择锚点时强制关闭屏幕外切换菜单 link？

Question

我正在寻找的 Javascript 解决方案应该完成以下任务：

切换打开屏幕外切换菜单
Select 锚标记菜单 link，导航到同一页面上的锚定部分
切换菜单关闭

这是演示问题的完整代码 Fiddle：https://jsfiddle.net/fpbs6fkz/

NOTE: The Additional JS + CSS are too long to post on stack overflow**

有问题的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 函数，它应该在我每次单击锚点 link 并导航到所需部分时关闭切换菜单，但它根本不起作用。

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 代码，以便在 select 锚菜单 link 时关闭切换菜单并导航到锚定部分？

Answer 1

尽管代码布局可怕且混淆 javascript，您可以简单地替换：

slideLeft.close();

和

$("#navToggle").click()

我通常会告诉您重用 #navToggle 的点击事件处理程序，但它被隐藏起来了。

如需更 "jquery" 的解决方案，请将整个 javascript（您包含在问题中且未隐藏在 fiddle 中）替换为：

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

已更新 fiddle：https://jsfiddle.net/wqd39kL2/1/

选择锚点时强制关闭屏幕外切换菜单 link？

Force an Off-Screen Toggle Menu to close when selecting an anchor link?

javascript

jquery

anchor

slidetoggle

toggleclass