基础6未关闭
Foundation 6 off-canvas not closing
本文关键字:基础 更新时间:2023-09-26
我有以下链接:http://www.alessandrosantese.com/test/aldemair-productions/
当您单击中间的"跳过"按钮时,您将看到下一张幻灯片,该幻灯片实现了FOundation6脱离画布。
我的标题包括切换画布外的按钮,它在画布外菜单之外,看起来是这样的:
<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');它不会关闭菜单
当菜单关闭并且标题滑回左侧时,类为off-canvas-wrapper-inner
的div
似乎仍然具有类is-off-canvas-open
和is-open-left
。尝试在$('header').removeClass('open').addClass('close')
之后删除这些类。
或者,如果可以根据文档设置Foundation画布外类(http://foundation.zurb.com/sites/docs/off-canvas.html),您不需要编写自定义事件来切换菜单。
所以在删除"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');
}
});
我不得不手动打开和关闭菜单
相关文章:
- zurb基础中的固定宽度立柱3
- 如何在大型nodeJS代码的基础上逐步引入typescript
- 引导程序/基础堆叠行/列
- 基础6未关闭
- JavaScript原型设计基础知识
- ListView没有'当基础对象更改时不会更新
- 我想在值的基础上选中复选框
- 使用基础选项卡时禁用滚动到内容
- 没有获得基础's的Javascript元素工作(与Laravel和Elixir)
- SlickGrid w/DataView未立即反映基础数据的更改
- 如何在多变量比较的基础上添加ng类
- 火力基础和查询
- 基础日期选择器、结束日期(和时间)不能早于开始日期(和时间)
- 基础画布外滚动条和内容显示,具有宽的主要内容
- 结束日期作为基础日期时间选择器中的选定开始日期
- 基础 6,粘性菜单和画布外位置固定
- D3 力导向布局的基础知识
- Javascript:数组和For循环基础知识
- 节点JS基础路由器被覆盖
- 基础导航顶部栏不适用于thymelaf