Свернуть меню не работает в MaterializeCSS

Я не понимаю, почему, когда я нажимаю меню сворачивания, ничего не происходит.Свернуть меню не работает в MaterializeCSS

Может ли кто-нибудь сказать мне, почему?

Я думаю, что я правильно добавил 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>

источник

2016-09-30 Anonymous

Там проблема с вашим сценарием. Должно быть:

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

Вместо:

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

источник

2016-09-30 16:40:47

Спасибо но он не работает ни –

Включите 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>

источник

2016-09-30 16:42:26

использовать инициализации хак, чтобы убедиться, что это последний элемент инициализируется: http://materializecss.com/templates/starter-template/js/init.js

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

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

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

источник

2017-10-11 09:37:50 slaver113

Свернуть меню не работает в MaterializeCSS

ответ

Смежные вопросы