物化CSS SideNav

Question

好的，我正在尝试使用materialize内置的移动端导航，我可以让菜单图标出现，但当我单击它时，什么也没有发生，就好像没有调用函数，但控制台中没有任何错误

<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

问题出在angular上。Angular不支持jquery，你必须根据它做一些调整。

删除init.js文件。

在main.ts中导入import { Component, OnInit, ElementRef} from 'angular2/core';

声明变量：

declare var jQuery: any;

使用OnInit实现您的类，并添加以下代码：

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

有关更多信息，请查看video

Plunker

Answer 2

尝试加载导航栏的初始化

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

至少在你的init.js中

我也有同样的问题，但这个小小的改变解决了它。