在单个页面中单击 link 后关闭响应式顶部导航栏菜单。基础 6

Question

希望有人能帮助我。我在基础中有一个带有锚点的页面在移动视图中，我希望在单击 link 后菜单自动关闭。关于基金会的信息不多。

这是一个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>

Answer 1

您只需在代码中添加一小段代码即可使其正常运行：

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

在单个页面中单击 link 后关闭响应式顶部导航栏菜单。基础 6

Close responsive top-nav bar menu after clicking a link in a single page. Foundation 6

javascript

responsive-design

zurb-foundation

zurb-foundation-6