Materialize CSS中Navbar受side nav影响发生折叠，该如何阻止？

问题根因 #

你写的初始化代码会选中页面内所有带.sidenav类的元素绑定侧边折叠逻辑，问题出在你的顶部导航栏DOM元素大概率也误添加了sidenav类，导致被一同初始化触发了折叠效果。

修复步骤 #

• 优先调整DOM类名：仅给侧边导航的DOM元素添加sidenav类，顶部桌面端导航栏移除该类，从根源上避免被误选中。
• 如果业务逻辑需要保留顶部导航的sidenav类，可以给侧边导航单独加自定义标识类，比如only-side-nav，初始化时仅选中带该标识的元素即可：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav.only-side-nav');
    var instances = M.Sidenav.init(elems, {'draggable':true});
});

• 如果要严格实现“非小屏场景下导航栏不许折叠”的需求，可以基于Materialize默认的992px桌面断点加屏幕宽度判断，非小屏场景下不初始化侧边导航：

document.addEventListener('DOMContentLoaded', function() {
    // 仅屏幕宽度小于992px的小屏场景初始化侧边折叠逻辑
    if (window.innerWidth < 992) {
        var elems = document.querySelectorAll('.sidenav');
        var instances = M.Sidenav.init(elems, {'draggable':true});
    }
});

内容的提问来源于stack exchange，提问作者Nicolas