Question

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

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

这是完整代码Fiddle演示此问题：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

尽管代码的布局非常糟糕，而且javascript也是如此，你可以简单地替换：

slideLeft.close();

与

$("#navToggle").click()

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

更多＆＃34; jquery＆＃34;解决方案，用以下内容替换您的整个javascript（包含在问题中并且不会隐藏在小提琴中）：

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

更新了小提琴：https://jsfiddle.net/wqd39kL2/1/

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

1 个答案: