Materialize SideNav生成多个#sidenav-overlay

Question

我正在使用Materialize，而sidenav在单击sidenav时创建了多个覆盖。

 <div id="sidenav-overlay" style="opacity: 1;" class=""></div>
 <div id="sidenav-overlay" style="opacity: 1;" class=""></div>
 <div id="sidenav-overlay" style="opacity: 1;" class=""></div>

我找到了一个修复的here并替换了here中的sideNav.js文件。但它仍然没有任何好处。

有没有人遇到过类似的情况，并找到了解决方案？

Answer 1

在SideNav后面出现多个覆盖的原因是因为materialize的$('.button-collapse').sideNav()在同一个元素上运行了多次。

解决这个问题的一个快速方法是在重新初始化materialize的sideNav之前从元素中删除所有以前的click()事件，如下所示：

$(".button-collapse").off('click').sideNav({ --yourOptions-- });

注意:我不确定".sideNav()“调用可能在这里添加了什么其他功能，可能有更好/更具体的方法来删除以前的初始化。

Answer 2

你在用什么语言编程？？我在asp.net上花了一些时间，错误的是声明了以下内容：

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

在MasterPage和ChildPages中。现在只声明MasterPage，问题就解决了。希望能对你有所帮助，致敬

Answer 3

对于那些在Drupal上使用Materialize Framework的用户，请确保不要通过Grunt或其他任务管理器意外地侧面加载另一个Materialize / Velocity JS副本。这会导致覆盖层堆叠得像疯了一样。