按钮切换 - 顶部栏不在Foundation中工作

时间:2014-07-27 06:30:14

标签: zurb-foundation

为什么菜单按钮不起作用? 他对点击没有反应。

浏览器控制台中的JS错误不是。

我的代码:

<nav class="top-bar" data-topbar="">
<ul class="title-area">
    <li class="name">
        <h1><a href="/testtop/">GamingTop</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section"><ul class="left"><li><a href="/testtop/tops/">Рейтинги</a></li><li><a href="/testtop/games/">Игры</a></li><li><a href="/testtop/about/">О нас</a></li></ul>
    <ul class="right">
        <li class="has-dropdown not-click">
            <a href="/testtop/profile">guyasyou@gmail.com</a>
            <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
                <li><a href="/testtop/profile">Профиль</a></li>
                <li><a href="/testtop/project/">Мои сервера</a></li>
                <li class="divider"></li>
                <li><a href="/testtop/auth/logout">Выйти</a></li>
            </ul>
        </li>
    </ul>
</section>

包括JS:

<script type="text/javascript" src="/testtop/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/testtop/js/foundation.min.js"></script>

1 个答案:

答案 0 :(得分:4)

这可能是由jQuery版本引起的。尝试使用最新版本,不要忘记关闭导航标签。 可以使用这段代码:

标题:

<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">

代码:

  <nav class="top-bar" data-topbar="">
    <ul class="title-area">
        <li class="name">
            <h1><a href="/testtop/">GamingTop</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section"><ul class="left"><li><a href="/testtop/tops/">Рейтинги</a></li><li><a href="/testtop/games/">Игры</a></li><li><a href="/testtop/about/">О нас</a></li></ul>
        <ul class="right">
            <li class="has-dropdown not-click">
                <a href="/testtop/profile">guyasyou@gmail.com</a>
                <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
                    <li><a href="/testtop/profile">Профиль</a></li>
                    <li><a href="/testtop/project/">Мои сервера</a></li>
                    <li class="divider"></li>
                    <li><a href="/testtop/auth/logout">Выйти</a></li>
                </ul>
            </li>
        </ul>
    </section>
  </nav>

在关闭身体标签之前:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<script>
    $(document).foundation();
</script>