Question

我有小提琴，工作正常，

我试图在我的本地系统上复制它，其中滑块（菜单图标）既不出现也不起作用。这是我的jsfiddle和源代码，任何人都可以告诉我我错过了什么。

Jsfiddle：https://jsfiddle.net/karimkhan/nzxd5r3r/10/

本地系统上的源代码：

<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"/>
        <title>Starter Template - Materialize</title>

        <!--<link href="font/material-design-icons/Material-Design-Icons.ttf" rel="stylesheet">-->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
        <link href="css/materialize.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
        <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>

        <script>
            $(".button-collapse").sideNav();
            $(".dropdown-button").dropdown();
            $('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
        </script>
    </head>
    <body>
        <main>
             <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
             <nav>
                  <div class="nav-wrapper light-blue lighten-1">
                    <ul id="nav-mobile" class="full side-nav">

                        <li><a href="#">John Daglas</a>
                          <ul class="collection">
                            <li class="collection-item avatar">
                              <img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
                              <span class="title">Title</span>
                              <p>First Line <br>
                                 Second Line
                              </p>
                            </li>
                          </ul>
                        </li>
                    <li><a href="#">Follower analysis</a></li>
                    <li><a href="#">Tweet analysis</a></li>
                    <li><a href="#">Retweet analysis</a></li>
                    <li><a href="#">Tweet analysis</a></li>
                    </ul>

                    <!-- Include this line below -->
                    <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
                    <!-- End -->

                  </div>
            </nav>
    <div class="row scrollspy grey lighten-4">
        <div class="container">
            <div class="row">
                    <div class="col s2 m2">
                        <div class="card-panel green accent-4">
                          <span class="white-text">Tweets
                          </span>
                        </div>
                    </div>
                    <div class="col s2 m2 ">
                        <div class="card-panel deep-orange accent-2">
                             <i class="material-icons">repeat</i>
                          <span class="white-text">Retweet
                          </span>
                        </div>
                    </div>
                    <div class="col s2 m2">
                        <div class="card-panel green accent-4">
                          <span class="white-text"> Favourite
                          </span>
                        </div>
                    </div>
                    <div class="col s2 m2 ">
                        <div class="card-panel deep-orange accent-2">
                          <span class="white-text"> Followers
                          </span>
                        </div>
                    </div>
                    <div class="col s2 m2">
                        <div class="card-panel green accent-4">
                          <span class="white-text"> Sentiment
                          </span>
                        </div>
                    </div>
                    <div class="col s2 m2 ">
                        <div class="card-panel deep-orange accent-2">
                          <span class="white-text"> Social score
                          </span>
                        </div>
                    </div>
            </div>
            <div class="row">
                    <div class="col s6 m6">
                        <div class="card-panel teal">
                          <span class="white-text">Sentiment analysis graph for tweets
                          </span>
                        </div>
                    </div>
                    <div class="col s6 m6">
                        <div class="card-panel light-blue accent-4">
                          <span class="white-text">Sentiment analysis donuts graph for all hastags
                          </span>
                        </div>
                    </div>
            </div>

            <div class="row">
                    <div class="col s12 m12">
                        <div class="card-panel teal">
                          <span class="white-text">Tags analysis.
                          </span>
                        </div>
                    </div>
            </div>

        </div>
    </div>
        </main>
        <footer class="page-footer">
            <div class="footer-copyright">
                <div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>

                </div>
            </div>
        </footer>

        <script src="js/init.js"></script>
        <script src="js/materialize.min.js"></script>
    </body>
</html>

Answer 1

您必须等到DOM已初始化（文档已完全加载）。将滑块代码换成以下内容：

$(function() {
    //code
});

此外，您在发布的代码中使用旧版本的jQuery，这与您的Materialise.js不兼容。请使用最新版本的jQuery 1.x（请点击此处：https://developers.google.com/speed/libraries/#jquery）

js滑块在localhost上不起作用

1 个答案: