当单击链接时，我该如何关闭Foundation顶部菜单？

Question

我在单页站点上使用了Zurb Foundation的固定顶部导航栏，并且其中包含指向页面内部位置的锚链接。我希望每当展开的移动菜单中的链接被点击时，菜单都能关闭。

目前，当链接被点击时，页面会滚动，但是菜单仍然保持打开状态并停留在页面顶端，看不见。

在以前的Foundation版本中，我曾经逆向工程找到过一个简单的解决方案。自从升级到4.3.1版本以修复另一个与顶部导航栏有关的问题后，由于我的JavaScript知识有限，我无法找到解决方案。 topbar 在我看来，如果我在菜单中的链接被点击时触发菜单关闭的事件或函数，问题就会得到解决。以前，我的代码放置在261行的链接点击事件上。

当移动菜单关闭时，.fixed被添加到围绕顶部导航栏的div中，而.expanded和.fixed则从.topbar div中删除。

- Wookieguy

Answer 1

您可以尝试添加一些jQuery代码，以便在单击链接时折叠菜单。

您可以将代码放置在script元素内。将其放置在所有html元素之后（body元素内部）。您还可以将其放在一个单独的JavaScript文件中，就像您会引用任何其他JavaScript文件一样。请确保将该链接放在jquery链接之后。

代码本身可能非常简单，因为它看起来foundation在切换菜单图标开关时会向导航栏添加一个名为“expanded”的类。因此，当有人单击按钮时，您只需删除“expanded”类即可。

下面是示例代码：

jQuery(document).ready(function($) {
    $('.top-bar ul.right(or .left depending how you arranged your buttons) li').click(function() {
       $('.top-bar').removeClass('expanded');
    });
}(jQuery));

选择器“.top-bar ul.right（或.left，具体看您如何排列按钮）li”也可以通过id进行调用，只需为菜单（ul元素）分配一个唯一的id即可。在这种情况下，它将是：

jQuery(document).ready(function($) {
    $('#myMenuId li').click(function() { 
        $('.top-bar').removeClass('expanded'); 
    });
}(jQuery));

希望这可以帮助到您。

- pr0tipZ

---

这个完美地运作了，并且可以适应我奇特的菜单设置。出于其他原因，我最近开始使用jQuery，这是一个很好的借口来重新学习它。谢谢。 - Wookieguy

Answer 2

尝试：

$('#main-menu li').click(function() {
    $('.toggle-topbar').trigger('click');
});

- Tyler Smith

---

由于我不理解这段代码，我不知道该把它放在哪里。我尝试了几个方法，但都是瞎猜。 - Wookieguy

Answer 3

这是我第一次使用Foundation 6，当我尝试找到一种在移动设备上关闭新的top-bar菜单的方法时，我看到了这篇文章。我想评论并分享我的解决方案，以便其他使用Foundation 6的人也能从这篇文章中得到启示。

这是我所做的：

导航设置 - 在中等和大型断点上是水平导航，在小断点上是响应式垂直导航切换。

                <!--  Mobile responsive toggle (hamburger menu) -->
                <div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <!-- Nav items -->
                <div id="siteNav" class="top-bar"> 
                    <p><ul class="vertical medium-horizontal menu text-center">
                        <li ><a href="#home" onClick="">HOME</a></li>
                        <li ><a href="#services">SERVICES</a></li>
                        <li ><a href="#contact">CONTACT</a></li>
                    </ul></p>
                </div>

然后我添加了一个修改版的jquery，基于这篇帖子中之前的解决方案（感谢amazingBastard和Cerbrus）：

$(document).ready(function($) {
        $('#siteNav li').click(function() { 
            if(Foundation.MediaQuery.current == 'small'){
                $('#siteNav').css('display', 'none'); 
            }
        });
    });

在Foundation 6中，"display" CSS选择器被添加到扩展菜单，并设置为"dispaly:none"表示隐藏或"dislay:block"表示展开。这个jQuery代码段会在单击默认菜单类中的导航项时检查当前断点是否为小型设备(移动设备)，如果是，则将CSS选择器更改为"dispaly:none"，有效关闭菜单切换功能。

- Jeremy Simons

Answer 4

我复制了Foundation 6下拉菜单关闭函数的一些代码。

为了使其工作，我还必须在菜单元素上设置选项data-disable-hover="true"，否则菜单将不会在用户第一次单击其中的元素时关闭。

我用AngularJS编写了我的代码并使其工作。我猜这对于jQuery来说应该是这样的。换句话说，该代码未经过测试。

$('#main-menu li').click(function closeDropdown() {
     var $toClose = $('#main-menu');

     if(!$toClose){
        return;
     }

     var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;

     if (somethingToClose) {
        $toClose.find('li.is-active').add($toClose).attr({
           'aria-expanded': false,
           'data-is-click': false
        }).removeClass('is-active');

        $toClose.find('ul.js-dropdown-active').attr({
           'aria-hidden': true
        }).removeClass('js-dropdown-active');
     }
  });

- Swoot

Answer 5

一种更清晰的方法（而不是触发点击或删除类）：

 $(document).on("click", ".top-bar li", function () {
     Foundation.libs.topbar.toggle($('.top-bar'));
 });

- mlb

---

这对我很有效，但为了使其正常工作并且不破坏右侧的“菜单”按钮（仅在小型/移动屏幕上），我需要针对导航栏中的另一个元素进行定位 - 针对此元素进行定位对我有用：.on("click", ".top-bar-section li" ... - FireDragon

Answer 6

这是对我有效的方法：

setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);

如果这对你也有效，请告诉我。（也许将“500”减少到半秒以下的时间）。

这是一个扩展版本：

<script type="text/javascript">
function hideDropDown() {
  setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);
}
</script>
<nav class="top-bar" data-topbar role="navigation">
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">My menu</a>
        <ul class="dropdown">
          <li><a onclick="hideDropDown()" target="another_page" href="/some/where">Menu item</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

- Kevin Hutchinson