Question

我在单页网站上使用Zurb Foundation的固定顶部栏，它包含指向页面内各个位置的锚点链接。我希望这样，只要点击展开的移动菜单中的链接，菜单就会关闭。

目前，当点击链接时，页面会滚动，但菜单会在页面顶部保持打开状态。

在以前版本的Foundation中，我能够对代码进行反向工程并找到一个简单的解决方案。自从更新到4.3.1以修复topbar的另一个问题后，由于我对javascript的了解有限，我无法找到解决方案。

topbar

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

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

Answer 1

单击链接时，可以尝试添加一些jQuery来折叠菜单。

您可以添加包含在脚本元素中的代码。将它放在所有html元素（body 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，那么选择器'.top-bar ul.right（或.left取决于你如何安排你的按钮）li'也可以用id调用。在这种情况下，它将是：

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

希望有所帮助。

Answer 2

尝试：

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

Answer 3

我是第一次与Foundation 6合作，我试图想方设法在点击链接时关闭手机上的新顶级菜单。我希望对我的解决方案发表评论，以防其他任何在基金会6上工作的人遇到这篇文章，因为这对我来说是一个很好的起点。

这就是我的所作所为：

导航设置 - 中型和大型断点上的水平导航，响应小断点上的垂直导航

new Date('2012-01-02').getFullYear()

然后我根据此帖中的先前解决方案添加了jquery的修改版本（感谢amazingBastard和Cerbrus）：

                <!--  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>

在Foundation 6中，css选择器“display”被添加到展开的菜单中，并设置为“display：none”表示隐藏或“display：block”表示展开。此jquery片段在我正在使用的默认菜单类中单击导航项时检查当前断点与小（移动设备），如果为true，则将css选择器更改为“display：none”，从而有效地关闭菜单切换。

Answer 4

更清洁的方式（而不是触发点击或删除类）：

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

Answer 5

这对我有用：

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

让我知道这是否适合你。（也许减少＆＃34; 500＆＃34;也可以短于半秒）。

这是一个扩展版本：

<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>

Answer 6

我复制了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');
     }
  });

如何在单击链接时关闭Foundation顶部栏菜单？

6 个答案: