Question

我试图通过一个简单的菜单来实现Materialize，这应该很简单：

首先，我将sidenav内容添加到页面：

<ul id="slide-out" class="sidenav">
<li><div class="user-view">
  <div class="background">
    <img src="images/office.jpg">
  </div>
  <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
  <a href="#name"><span class="white-text name">John Doe</span></a>
  <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>

然后添加jquery代码：

$( document ).ready(function() {
 $('.sidenav').sidenav();
});

最后是问题所在的部分：

我的导航栏位于页面顶部：

<nav>
<div class="nav-wrapper">
  <a href="#" class="brand-logo" data-target="slide-out" class="sidenav-trigger"><img src="icon.png" alt="" /></a>

  <ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
    <li><a href="#" data-target="slide-out" class="sidenav-trigger">Trigger SideNav</a></li><!-- This is just not showing -->
  </ul>

</div>
</nav>

由于某些原因，此菜单未显示：

 <li><a href="#" data-target="slide-out" class="sidenav-trigger">Trigger SideNav</a></li>

除非我将其取下... data-target="slide-out" class="sidenav-trigger"

我该如何解决？

Answer 1

除了Moein所说的（仅当页面宽度小于993px时才会出现sidenav-trigger菜单），您还可以通过将show-on-large类添加到菜单按钮来使它看起来完全一样。

类似的东西：

    <nav>
        <div class="nav-wrapper">
            <a href="#" data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons">menu</i></a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#" data-target="slide-out">Menu</a></li>
                <li><a href="">Info</a></li>
            </ul>
        </div>
    </nav>

Answer 2

我知道这不是问题，当浏览器的宽度小于993px时，将显示具有sidenav-trigger类的元素。只需将浏览器窗口的宽度调整为小于993px，然后查看结果即可。

如果它不起作用：

我认为问题可能出在您链接的内容上。用文字替换图片，然后重试。

Answer 3

出于声誉原因，不允许我发表评论。它将与javascript代码一起使用

document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {});
});

您无需更改官方文档中提供的代码，而是可以更改这段代码

M.Sidenav.init(elems, options);

与此

M.Sidenav.init(elems, {});

使用正式的javascript代码，您会发现加载页面时控制台中出现错误。

实现-像这样触发Sidenav消失

3 个答案: