Javascript 单击链接时，如何关闭基础TopBar菜单？

我在我的单页网站上使用Zurb基金会的固定顶栏，它包含指向页面内位置的锚链接。我希望这样，每当点击扩展移动菜单中的链接时，菜单就会关闭

当前，单击链接时，页面会滚动，但页面顶部的菜单保持打开状态，无法查看

在以前的基金会版本中，我能够逆向设计代码并找到一个简单的解决方案。由于更新到4.3.1以修复topbar的另一个问题，我无法找到解决方案，因为我对javascript的知识有限

在我看来，如果我可以在单击菜单中的链接时触发事件或函数来关闭菜单，它就会被修复。以前，我把我的代码放在点击261行的链接上

当移动菜单关闭时，.fixed将添加到顶栏周围的div中，而.expanded和.fixed将从.topbar div中删除。

请尝试：

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

---

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

您可以添加包装在脚本元素中的代码。将它放在所有html元素（body元素内部）之后。您还可以将其放在一个单独的javascript文件中，您可以像其他javascript文件一样对其进行源代码生成。确保将该链接放在jquery链接之后

<> >代码本身非常简单，因为当您打开和关闭菜单图标时，基金会将一个称为“扩展”的类添加到导航栏中。因此，当有人单击您的按钮时，您可以删除“扩展”类

它应该是这样的：

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

如果给菜单（ul元素）一个唯一的id，也可以使用id调用选择器“.top bar ul.right”（或.left，具体取决于按钮的排列方式）。在这种情况下，它将是：

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

希望有帮助。

一种更干净的方法（而不是触发单击或删除类）：

---

这对我来说很有用：

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>

函数hideDropDown（）{
setTimeout（function（）{$（document）.foundation（'topbar'，'reflow'）}，500）；
}







 > p>我第一次与基金会6一起工作，我在这篇文章中跑过去，试图找出一种方法，在点击链接时关闭手机上的新的顶部栏菜单。我想对我的解决方案作出评论，以防有人在基金会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>

在基础6中，CSS选择器“显示”被添加到扩展菜单中，并设置为“显示：无”以隐藏或“显示：块”以展开。这个jQuery片段在我正在使用的默认菜单类中点击一个Navo项检查小的（移动设备）的当前断点，如果真的将CSS选择器更改为“显示：没有”，有效地关闭菜单切换。
 < P>我复制了基础6下拉的关闭函数的代码中的一些代码。p>
为了让它工作，我还必须在菜单元素上设置选项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');
     }
  });

由于我不懂代码，我不知道该把它放在哪里。我尝试了一些东西，但实际上就像在黑暗中拍摄一样。这非常有效，并且适合我的时髦菜单设置。出于其他原因，我最近进入了jQuery，这是一个很好的重新学习它的借口。谢谢。这对我来说很有用，但为了让它工作起来，n若不打开右侧的“菜单”按钮（仅在小屏幕/移动屏幕上），我需要在导航栏中瞄准不同的元素——瞄准这个元素对我来说很有效：
。在（“单击“，”。顶栏部分li…
$(document).ready(function($) {
        $('#siteNav li').click(function() { 
            if(Foundation.MediaQuery.current == 'small'){
                $('#siteNav').css('display', 'none'); 
            }
        });
    });

$('#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');
     }
  });