我使用的侧边栏顶部有一个导航栏，只显示汉堡按钮（移动时）和刷新按钮。它做得很好，但是当您单击汉堡包图标时，什么也没有发生！侧边栏打不开。我怎样才能解决这个问题？
这是我的代码（重要的东西）：
<div class="navbar-fixed">
<nav class="navbar blue">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li><a onClick="window.location.reload()"><i class="material-
icons">refresh</i></a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i
class="material-icons">menu</i></a>
</div>
</nav>
</div>
<ul id="slide-out" class="sidenav sidenav-fixed">
...
</ul>
是的，我确实有 Materialize CSS 和 JS，以及 jQuery 版本 2.1.1。
请参阅此小提琴以获取有效的解决方案以及如何导入所需的 js。
代码：
<head>
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
<!-- this part is important! -->
$(document).ready(function () {
$(".button-collapse").sideNav();
});
</script>
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</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><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
</div>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</body>
记得在你的 document.ready() 函数中初始化 sideNav！
这应该可以解决问题。
| 归档时间： |
|
| 查看次数： |
5674 次 |
| 最近记录： |