物化 CSS SideNav答案

【问题标题】：Materialize CSS SideNav物化 CSS SideNav
【发布时间】：2016-03-16 04:07:15
【问题描述】：

好的，我正在尝试使用 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 来构建页面

【问题讨论】：

你必须通过$(".button-collapse").sideNav();初始化sidenav

标签： jquery html css angularjs materialize

【解决方案1】：

问题在于角度。 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

【讨论】：

【解决方案2】：

尝试加载导航栏的初始化

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

至少在你的 init.js 中

我遇到了同样的问题，但这个小改动解决了它。

【讨论】：