两个导航共用同一data-activates仅一个生效，如何实现共用侧边栏？

我明白你遇到的问题了——Materialize的button-collapse组件默认只会自动初始化第一个匹配到的触发器元素，所以两个导航栏里的按钮虽然都指向同一个侧边栏ID，但只有第一个能正常触发。下面给你两种可行的解决方案，都能让两个按钮都控制同一个侧边栏：

方案1：手动初始化所有触发器（推荐） #

这种方法更可靠，能彻底避免自动初始化的冲突问题：

步骤1：修改HTML，移除自动初始化属性 #

把两个导航里的按钮标签的data-activates属性去掉，防止Materialize自动绑定第一个元素：

<!-- 移动端导航的按钮 -->
<a href="#" class="button-collapse"><i class="material-icons">menu</i></a>
<!-- 桌面端导航的按钮 -->
<a href="#" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>

步骤2：添加自定义JavaScript初始化代码 #

在页面底部（或者你的全局JS文件里）添加这段代码，手动给所有触发器绑定侧边栏控制逻辑：

document.addEventListener('DOMContentLoaded', function() {
    // 初始化侧边栏实例
    const sidenavInstance = M.Sidenav.init(document.getElementById('slide-out'), {
        edge: 'left', // 侧边栏滑出方向，根据你的需求调整
        menuWidth: 300 // 侧边栏宽度，按需修改
    });

    // 获取所有的菜单触发器按钮
    const triggerButtons = document.querySelectorAll('.button-collapse');
    
    // 给每个按钮绑定点击事件，触发侧边栏切换
    triggerButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            sidenavInstance.toggle(); // 切换侧边栏的展开/收起状态
        });
    });
});

方案2：强制重新初始化所有触发器 #

如果你不想修改HTML的data-activates属性，也可以通过JS手动遍历所有触发器并初始化：

document.addEventListener('DOMContentLoaded', function() {
    // 遍历所有带有button-collapse类的元素，逐个初始化
    document.querySelectorAll('.button-collapse').forEach(trigger => {
        M.Sidenav.init(trigger, {
            edge: 'left',
            menuWidth: 300
        });
    });
});

这种方法会让每个触发器都关联到同一个侧边栏，因为它们的data-activates都指向slide-out，Materialize会自动处理共享同一个侧边栏实例的逻辑。

额外注意点 #

• 确保你的侧边栏元素（#slide-out）在页面中只存在一个，你已经通过@include('web.includes.sidebar')引入，这点应该没问题。
• 如果你使用的是jQuery版本的Materialize，代码逻辑类似，只是初始化方式换成$('.button-collapse').sidenav()，但推荐用原生JS版本更轻量。

这样修改后，无论是移动端还是桌面端的导航按钮，都能正常触发同一个侧边栏的展开和收起了。

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