Question

我有以下代码：

    <ul id="slide-out" class="side-nav">
        <li><a class="subheader">Scalls Seleccionados</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 1</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 2</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 3</a></li>
        <li><div class="divider"></div></li>
    </ul>
    <a data-activates="slide-out" class="button-collapse btn-floating btn-large cyan" style="top: 10px; left: 10px;">
        <i class="material-icons">menu</i>
    </a>

当我在Materialisecss中显示sidenav时，你知道如何禁用/删除叠加层吗？

我花了很多时间试图删除它。

问候！

Answer 1

如果问题是因为叠加层与导航菜单重叠，请使用此CSS修复程序;

.navbar-fixed {
   z-index: 999; 
}
// the default value is 997 in materialize.min.css, which places the nav behind the overlay... :(

Answer 2

一种方法是将UIView添加到您的CSS中。

Answer 3

好吧，我还没有找到任何具体的函数调用。这是如何禁用sidenav而不将其从DOM中删除。

var sideNavElem = $('a[data-activates="slide-out"]');

$(sideNavElem).off('click');
$(sideNavElem).click(function(e){
   e.preventDefault();
});

它与你想要的相似吗？

Answer 4

将此添加到您的css文件中：

#sidenav-overlay {
    background-color: transparent;
}

Answer 5

我知道这是一个古老的问题，但是对于任何想要删除覆盖层的人来说，其工作原理如下：-

.sidenav-overlay {
    height: 0px;
    width: 0px;
}

或使用Svelte：-

:global(.sidenav-overlay) {
    height: 0px;
    width: 0px;
}

Answer 6

您可以使用onOpenStart事件轻松将其从DOM中删除

$('.side-nav').sidenav({
    ..., //your sidenav options here
    onOpenStart: function(sidenav) {
        sidenav.M_Sidenav._overlay.remove();
    }
});

如何在Materializecss中禁用sidenav覆盖？

6 个答案: