实现CSS SideNav

Question

好吧我正在尝试使用物化内置的移动侧导航，我能够显示菜单图标但是当我点击它时没有任何反应，就好像没有调用该函数但是控制台中没有任何错误

<div class="navbar-fixed">
    <nav class="white">
        <div class="nav-wrapper">
        <a href="index.html" class="brand-logo"><img src="img/logo.png" alt="Logo" height="64"></a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons black-text">menu</i></a>
        <ul class="right hide-on-med-and-down">
            <li><a id="nav" href="index.html" class="red-text1">Home</a></li>
            <li><a href="webdesign.html" class="red-text1">Web Design</a></li>
            <li><a href="graphicdesign.html" class="red-text1">Graphic Design</a></li>
            <li><a href="video.html" class="red-text1">Video</a></li>
            <li><a href="about.html" class="red-text1">About</a></li>
            <li><a href="awards.html" class="red-text1">Awards</a></li>
            <li><a href="contact.html" class="red-text1">Contact</a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="index.html" class="red-text1">Home</a></li>
            <li><a href="webdesign.html" class="red-text1">Web Design</a></li>
            <li><a href="graphicdesign.html" class="red-text1">Graphic Design</a></li>
            <li><a href="video.html" class="red-text1">Video</a></li>
            <li><a href="about.html" class="red-text1">About</a></li>
            <li><a href="awards.html" class="red-text1">Awards</a></li>
            <li><a href="contact.html" class="red-text1">Contact</a></li>
          </ul>
        </div>
    </nav>

    <link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<!-- Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="http://materializecss.com/templates/starter-template/js/init.js"></script>

如果有任何区别，我也会使用angular来构建页面

Answer 1

The problem is with angular. Angular don't support jquery and you have to make some adjustment according to it.
Delete init.js file.

In main.ts import import { Component, OnInit, ElementRef} from 'angular2/core';

declare variable:
declare var jQuery: any;

implement your class with OnInit add following code:

export class AppComponent implements OnInit{
 constructor(private el:ElementRef){}
  ngOnInit() {
    jQuery(this.el.nativeElement).find('.button-collapse').sideNav();
  }
} `

For more info watch video

Plunker

Answer 2

尝试加载Navbar的初始化

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

至少在你的init.js

中

我遇到了同样的问题，但是这个小小的改变修复了它。