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を含めます| HTMLで.button-collapse

のためのあなたのコード内の小さな変更を加えたと：

<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で折りたたみメニューが機能しない

答えて

関連する問題