单击单个页面中的链接后关闭响应式顶部导航栏菜单。基础 6答案

【问题标题】：Close responsive top-nav bar menu after clicking a link in a single page. Foundation 6单击单个页面中的链接后关闭响应式顶部导航栏菜单。基础 6
【发布时间】：2018-07-10 14:54:29
【问题描述】：

希望有人可以帮助我。我在基础中有一个带有锚点的页面在移动视图中，我希望在单击链接后菜单会自动关闭。关于基金会的资料不多。

这是CODEPEN

     <nav class="top-bar topbar-responsive" data-sticky data-options="stickyOn:small;"  data-margin-top="0">
  <div class="top-bar-title" >
    <span data-responsive-toggle="topbar-responsive" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
    </span>

    <a class="topbar-responsive-logo" href="#inicio" data-smooth-scroll>TITLE</a>
  </div>
  <div id="topbar-responsive" class="topbar-responsive-links">
    <div class="top-bar-right">
      <ul class="menu simple vertical medium-horizontal" data-magellan data-options="animationEasing: swing; animationDuration: 1000;">
          <li><a href="#inicio">Home</a></li>
        <li><a href="#1">one</a></li>
        <li><a href="#2">two</a></li>



      </ul>
    </div>
  </div>
</nav>

<section id="1">
  <h2>1</h2>
</section>
<section id="2">
  <h2>2</h2>
</section>

【问题讨论】：

喜欢这个？ codepen.io/anon/pen/PBoRKw
这正是我想要的。非常感谢您的快速反应。现在我看到了你的代码，我可以理解你的解决方案。这真的很有帮助。再次感谢。

标签： javascript responsive-design zurb-foundation zurb-foundation-6

【解决方案1】：

您只需要在代码中添加一个次要的 sn-p 即可使其正常工作：

$(function(){
   $(document).foundation();    
   $('.menu>li').click(function(){
      $('.menu-icon').click();   
   })
})

【讨论】：