实现CSS sidenav不起作用

时间:2016-08-22 22:20:53

标签: javascript html nav materialize

我的sideNav没有在使用materializeCSS的页面上工作 这是我的HTML:

```的HTML

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
        <meta charset="UTF-8">
        <title>Dutch Fork Running | Contact</title>

        <!-- CSS -->
        <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="../includes/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
        <link href="../includes/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
        <link href="../includes/css/fullcalendar.css" rel="stylesheet" />
        <link href="../includes/css/fullcalendar.print.css" rel="stylesheet" media="print" />
        <link href="../includes/css/font-awesome.css" rel="stylesheet" />
        <!-- Scripts -->
        <script src="../includes/js/jquery.min.js"></script>
        <script src="../includes/js/materialize.js" async defer></script>
        <script src="../includes/js/moment.min.js"></script>
        <script src="../includes/js/jquery.min.js"></script>
        <script src="../includes/js/fullcalendar.js"></script>
        <script src="../includes/js/ical.js"></script>
        <script src="../includes/js/ical_events.js"></script>
        <script src="../includes/js/ical_fullcalendar.js"></script>
        <script src="../includes/js/gcal.js"></script>
        <script src="../includes/js/init.js"></script>

        <script type="text/javascript">var rootdir = "../";</script>

</head>
<body>
        <!-- <div class="navbar-fixed"> -->
                <header>
                        <nav class="green">
                                <div class="nav-wrapper">
                                        <a href="../#" class="center brand-logo">
                                                <img height="54px" src="../images/cc-arrow-green.png" alt="logo">
                                        </a>



                                        <a href="#" data-activates="mobile-menu" class="button-collapse" style="display:block !important;"><i class="material-icons">menu</i></a>

                                        <ul class="side-nav" id="mobile-menu">
                                                <li class="">
                                                        <a href="../">
                                                                Home
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../Calendar">
                                                                Calendar
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../Records">
                                                                Records
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../Archives">
                                                                Archives
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../Handbook">
                                                                Handbook
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../Join">
                                                                Join
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../Misc">
                                                                Misc Info
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../Contact">
                                                                Contact
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../BoosterClub">
                                                                Booster Club
                                                        </a>
                                                </li>
                                                <li class="">
                                                        <a href="../SFTR">
                                                                Silver Fox Trail Run
                                                        </a>
                                                </li>
                                        </ul>

                                </div>
                        </nav>
                </header>

```

它表示sideNav函数没有在该页面上定义。适用于其他人,页面之间的粘贴部分没有区别。

这是追溯:

jQuery.Deferred exception: undefined is not a function (evaluating '$('.button-collapse').sideNav()') (2)
(anonymous function) — init.js:3
j — jquery.min.js:2:58607
(anonymous function) — jquery.min.js:2:88441
undefined

我用$(&#39; .button-collapse&#39;)来调用它.sideNav();

已解决:在具体化javascript文件结束时调用

1 个答案:

答案 0 :(得分:3)

我通过添加$(&#39; .button-collapse&#39;)解决了这个问题.sideNav();到materialize.js文件的底部。