[英]Foundation 6 off-canvas not closing
我有以下链接: http : //www.alessandrosantese.com/test/aldemair-productions/
当您单击中间的跳过按钮时,您将进入下一张幻灯片,其中实现了FOundation 6 off画布。
我的标题包括切换画布外的按钮,它位于非画布菜单之外,它看起来像:
<header class="fixed close">
<div class="hamburger" data-toggle="sth">
<button type="button">
<span></span>
<span></span>
<span></span>
</button>
<span class="menu">Menu</span>
</div>
<div class="logo">
<h1>Aldemar</h1>
<span>productions</span>
</div>
<span class="mail-icon float-right" data-open="contact-us">
</span>
</header>
我有以下js关闭画布外菜单:
$('.hamburger').on('click', function(e){
e.preventDefault();
if($('header').hasClass('close')){
$('header').removeClass('close').addClass('open');
$(this).find('button').toggleClass('open');
$('body').addClass('block-view');
}
else {
$('.off-canvas').foundation('close');
$('header').removeClass('open').addClass('close');
$(this).find('button').toggleClass('open');
$('body').removeClass('block-view');
$('#sth').foundation('close');
}
});
但这不起作用:$('#sth')。foundation('close'); 它没有关闭菜单
它看起来像div
与类off-canvas-wrapper-inner
仍然具有类is-off-canvas-open
和is-open-left
当菜单被关闭,头部滑回左侧。 尝试在$('header').removeClass('open').addClass('close')
之后删除这些类$('header').removeClass('open').addClass('close')
。
或者,如果可以根据文档( http://foundation.zurb.com/sites/docs/off-canvas.html )设置Foundation off-canvas类,则不需要编写自定义事件切换菜单。
所以删除“data-toggle =”sth“”之后我更新了我的js如下:
$('.hamburger').on('click', function(e){
e.preventDefault();
if($('header').hasClass('close')){
$('header').removeClass('close').addClass('open');
$(this).find('button').toggleClass('open');
$('body').addClass('block-view');
$('#sth').foundation('open');
}
else {
$('.off-canvas').foundation('close');
$('header').removeClass('open').addClass('close');
$(this).find('button').toggleClass('open');
$('body').removeClass('block-view');
$('#sth').foundation('close');
}
});
我不得不手动打开和关闭菜单
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.