Menu 点击链接基础关闭画布菜单

Menu 点击链接基础关闭画布菜单,menu,zurb-foundation,Menu,Zurb Foundation,我已经设置了一个离开画布菜单时,我的网站移动 <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title> Mobile Application</title> <

我已经设置了一个离开画布菜单时,我的网站移动

<html class="no-js" lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Mobile Application</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/custom.css" />
    <link rel="stylesheet" href="css/custom-mobile-portrait.css" />
    <link rel="stylesheet" href="css/custom-mobile-landscape.css" />
    <link rel="stylesheet" href="css/custom-xlarge.css" />
    <link rel="stylesheet" href="css/custom-ipad.css" />
    <link rel="stylesheet" href="css/custom-ipad-portrait.css" />
    <link rel="stylesheet" href="css/font-sizes.css" />
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
    <script src="js/vendor/modernizr.js"></script>
    <a name="head"></a>
</head>

<body>

    <div class="off-canvas-wrap mobile-menu" data-offcanvas>
        <div class="inner-wrap">
            <nav class=" tab-bar hidden-for-large-up" data-topbar ">  
          <section class="left-small ">
            <a class="left-off-canvas-toggle menu-icon " href="# "><span></span></a>
          </section>

       <section class="middle tab-bar-section ">

    <a href="http://mysite.url ">   </a>

          </section>


        </nav>

        <aside class="left-off-canvas-menu ">
          <ul class="off-canvas-list ">
            <li><label>Dehumaniser App</label></li>
            <li><a href="#top "><STRONG>TOP</STRONG></a></li>
            <li><a href="#overview "><STRONG>APP OVERVIEW</STRONG></a></li>
                 <li><a href="#how "><STRONG>HOW DOES IT WORK</STRONG></a></li>
              <li><a href="#features " ><STRONG>FEATURES</STRONG></a></li>
              <li><a href="#gallery "><STRONG>GALLERY</STRONG></a></li>
          </ul>
        </aside>

       <!--  <aside class="right-off-canvas-menu ">
          <ul class="off-canvas-list ">
            <li><label>Users</label></li>
            <li><a href="# ">Hari Seldon</a></li>
            <li><a href="# ">...</a></li>
          </ul>
        </aside> -->

        <section class="main-section ">

移动应用

  • 我将我的网站内容放在这里,然后在代码完成后:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    
    
    
    <script src="js/vendor/fastclick.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.offcanvas.js"></script>
    
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
    
    <script src="js/myscript.js"></script>
    
    <script src="js/foundation/foundation.topbar.js"></script>
    <script src="js/foundation/foundation.orbit.js"></script>
    <script src="js/myscript.js"></script>
    
    
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('.single-item').slick();
        });
    </script>
    
    
    
    
    
    <script type="text/javascript">
        jQuery(document).foundation()
    </script>
    
    
    
    </section>
    
    <a class="exit-off-canvas"></a>
    
    </div>
    
    </div>
    
    
    <script>
        jQuery(document).foundation();
        jQuery('a.left-off-canvas-toggle').on('click', function() {
    
        });
    </script>
    
    <div id="fixedbutton">
        <a href="#head"><img src="img/upbutton.png">
        </a>
    </div>
    </body>
    
    </html>
    
    
    jQuery(文档).ready(函数(){
    jQuery('.single item').slick();
    });
    jQuery(文档).foundation()
    

    我得到了正确的非画布行为(我得到了三行框。当我单击框时,它会打开,非画布菜单会出现),但当我单击菜单链接时,即使页面平滑地向下滚动,非画布菜单也不会关闭。如何修复此问题?

    尝试将这些行添加到脚本中

    $(document).foundation({
      offcanvas : {
        close_on_click : true
      }
    });