切换功能在小屏幕上有效，但是在使用大屏幕时，切换功能不会显示/隐藏容器。
是否有一种方法可以使容器默认在大屏幕上显示，但也可以使用Foundation单击按钮来显示和隐藏该容器？
容器：
<div class="off-canvas position-left reveal-for-large is-transition-push"
id="mainSidebar"
data-off-canvas
data-position="left"
aria-hidden="false">Content goes here.</div>
按钮：
<button class="menu-icon"
type="button"
data-open="mainSidebar"
aria-expanded="false"
aria-controls="mainSidebar">Toggle container</button>
CSS代码
<style>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
HTML代码
<body>
<div id="sideNav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#" class="active">Home</a>
<a href="#">About Us</a>
<a href="#"> Our Services</a>
<a href="#">Contact Us</a>
<a href="#">Sign Up</a>
<a href="#">Login Up</a>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
用于打开和关闭切换器的JS脚本
<script>
function openNav() {
document.getElementById("sideNav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
</body>