Question

我不明白为什么当我点击折叠菜单时，没有任何反应。

有人可以告诉我为什么吗？

我认为我已经正确添加了jQuery，除了折叠菜单外，一切正常。

由于

<!doctype html>
<html lang="en" ng-app="app" ng-controller="MainController as main">

<head>
  <base href="/">
  <title>Stalker - {{main.title}}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/libs/materialize/dist/css/materialize.css">
  <link href="https://fonts.googleapis.com/css?family=Baloo+Da|Karla" rel="stylesheet">
  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script>
     $( document ).ready(function){
        $(".button-collapse").sideNav();
     });
   </script>
</head>

<body>
<nav>
    <div class="nav-wrapper  indigo darken-4">
      <a href="/" class="brand-logo">Stalker</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li ng-hide="loggedIn"><a href="/register"><i class="tiny material-icons left">assignment_ind</i>Sign Up</a></li>
        <li ng-hide="loggedIn"><a href="/login"><i class="tiny material-icons left">input</i>Login</a></li>
        <li ng-show="loggedIn"><a href="/profile"><i class="tiny material-icons left">perm_identity</i>Profile</a></li>
        <li ng-show="loggedIn"><a href="/logout"><i class="tiny material-icons left">input</i>Logout</a></li>
      </ul>
      <ul class="side-nav" id="dropdown-button">
        <li ng-show="loggedIn"><a href="/profile"><i class="tiny material-icons left">perm_identity</i>Profile</a></li>
        <li ng-hide="loggedIn"><a href="/register"><i class="tiny material-icons left">assignment_ind</i>Sign Up</a></li>
        <li ng-hide="loggedIn"><a href="/login"><i class="tiny material-icons left">input</i>Login</a></li>
        <li ng-show="loggedIn"><a href="/logout"><i class="tiny material-icons left">input</i>Logout</a></li>
      </ul>
    </div>
  </nav>

Answer 1

您的脚本存在问题。应该是：

 $( document ).ready(function(){
    $(".button-collapse").sideNav();
 });

而不是：

$( document ).ready(function){
    $(".button-collapse").sideNav();
 });

Answer 2

在您编写的脚本之前包含jQuery并对.button-collapse

的代码进行了细微更改

在HTML中：

 <script   src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script>
         $( document ).ready(function(){
            $(".button-collapse").sideNav();
         });
       </script>

Answer 3

使用init hack来确保它是最初初始化的元素：http://materializecss.com/templates/starter-template/js/init.js

(function($){
    $(function(){

         $('.button-collapse').sideNav();

    }); // end of document ready
})(jQuery); // end of jQuery name space

折叠菜单在MaterialiseCSS中不起作用

3 个答案: