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
}
});