基础5菜单栏切换不起作用

Question

我一直在努力解决这个问题。然而某些地方似乎有些不对劲。我尝试添加foundation.topbar.js，并添加了foundation.min.js。站点中的任何位置都没有JS错误。只是无法理解导致此错误的原因。这是我的代码，

navbar.handlebars

<nav class="top-bar top_bar_custom" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
            <a href="#">
                {{#brandLogo}}
                    <img src="{{imgSrc}}" alt="">
                {{/brandLogo}}
            </a>
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon">
            <a href="#">
                <span>Menu</span>
            </a>
        </li>
    </ul>

    <section class="top-bar-section">
        <ul>
            {{#navItems}}
            <li class="top_bar_li">
                <a href="">{{anchorData}}</a>
            </li>
            {{/navItems}}
        </ul>
        <!-- Right Nav Section -->
        <ul class="right">
            <li class="has-dropdown top_bar_li not-click">
                {{#profileArea}}
                <a href="#">{{anchorData}} <span>{{username}}</span></a>
                <ul class="dropdown">
                    {{#dropdown}}
                    <li>
                        <a class="ddHeight" href="#">{{firstLink}}</a>
                    </li>
                    <li class="active">
                        <a class="ddHeight" href="#">{{secondLink}}</a>
                    </li>
                    {{/dropdown}}
                </ul>
                {{/profileArea}}
            </li>
            <li class="top_bar_li pic_middle">
                <img src="images/profile_pic.png" alt="">
            </li>
        </ul>
    </section>
</nav>  

在html中链接的方式

    </footer>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation.topbar.js"></script>
    <script src="js/jquery.knob.js"></script>
    <script src="js/raty/jquery.raty.js"></script>
    <script src="js/chartist/chartist.min.js"></script>
    <script src="js/handlebars-v2.js"></script>
    <script src="js/templates/templates.js"></script>
    <script src="js/all.js"></script>
    <script>
    $(document).foundation();
    </script>
</body>  

这是我在all.js文件中调用把手模板的部分

$(document).ready(function() {
    // below written code is used for adapting single sidebar and navbar throught the site
    //using jQuery getjson method
    $.getJSON("sidebar.json", function(data) {
        // code for navbar here
        var navbar = $('#navbar');
        var navTag = $('<nav class="top-bar top_bar_custom" data-topbar role="navigation"></nav>');
        navbar.append(navTag);
        // var navbar = $("#navbar-template").html();
        var template = Handlebars.templates['navbar'];
        $('#navBar').append(template(data));

        var template = Handlebars.templates['sidebar'];
        $('#sidebar').append(template(data));

    });

。
  。
  其余的代码..