Zurb Foundation 5 offcanvas 不起作用 [英] Zurb Foundation 5 offcanvas not working

查看:31
本文介绍了Zurb Foundation 5 offcanvas 不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使用 zurb 的基础框架为网站实现一个 offcanvas,用于移动查看,并且只是从文档中复制了它的代码,但它不起作用.

I'm trying to implement an offcanvas to a site using zurb's foundation framework, for mobile viewing, and just copied the code for it from the documentation, but it just doesn't work.

代码如下:

<script src="/js/vendor/custom.modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>

<script>
    $(document).foundation();
</script>
</head>
<body>
<!--offcanvas begin-->
    <div class="off-canvas-wrap">
        <div class="inner-wrap">

            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span>Foundation</span>
                </a>  
            </nav>


            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Foundation</label></li>
                    <li><a href="#">The Psychohistorians</a></li>
                    <li><a href="#">The test!</a></li>
                </ul>
            </aside>

            <section class="main-section">
            <!--offcanvas begin-page-content-->

                <!--content-->

            <!--offcanvas end-page-content-->
            </section>

            <a class="exit-off-canvas"></a>

        </div><!--inner-wrap-->
    </div><!-- off-canvas-wrap -->
<!--offcanvas end-->
</body>

我做错了什么吗?

推荐答案

不幸的是,Ribena 的答案在 5.2.3 版本中不再有效,尽管它在 5.0.3 版本中.

Unfortunately, Ribena's answer is not working anymore, at version 5.2.3, though it was at version 5.0.3.

为了让它现在工作,需要放置触发器javascript:

For it to work now, the trigger javascript needs to be put:

  • 或在 <body> 标签的末尾,如 文档,就像丹尼尔所说的
  • 或者在 里面这样(使用 JQuery):
  • or at the end of the <body> tag as it said in the docs, like Daniel said
  • or inside the <head> this way (using JQuery):

<代码><脚本>$(window).bind("load", function () {$(文档).基础();});

这篇关于Zurb Foundation 5 offcanvas 不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆