Question

我在移动时使用非画布菜单设置我的网站

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

我得到了正确的画布行为（我得到了三行框。当我点击它打开的框时，会出现画布菜单）但是当我点击一个菜单链接时，即使页面顺利滚动关闭 - 扫描菜单不关闭。我该如何解决这个问题？

Answer 1

尝试将这些行添加到您的脚本

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

单击链接基础后关闭画布菜单

1 个答案: