如何使用外部JavaScript onClick事件调用ArchitectUI自带方法展开左侧菜单

开发者阿泽

2026-9-29

实现步骤

你可以通过直接触发原有绑定的菜单事件来实现自定义按钮触发，无需重写展开逻辑，适配原有框架的交互规则：

1. 自定义按钮HTML代码

你可以在页面任意位置放置触发按钮，示例：

<!-- 触发单个指定菜单展开/收起 -->
<button id="toggleTargetMenu">展开指定菜单</button>
<!-- 一键展开所有子菜单 -->
<button id="expandAllSubmenu">展开全部菜单</button>
<!-- 切换整个左侧边栏折叠/展开（缩成图标模式） -->
<button id="toggleSidebar">切换侧边栏</button>

2. 绑定点击事件调用原有逻辑

把以下JS代码放在页面底部，或者放在DOMContentLoaded回调中确保DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  // 1. 触发指定单个菜单展开/收起
  document.getElementById('toggleTargetMenu').addEventListener('click', function() {
    // 替换成你要操作的目标子菜单的父元素选择器，可通过DevTools元素面板查看对应菜单的类名或ID
    const targetSubmenu = document.querySelector('.submenu:nth-child(2)');
    if(targetSubmenu) {
      // 直接触发原有菜单的点击事件，复用框架自带的展开逻辑
      targetSubmenu.querySelector('a').click();
    }
  });

  // 2. 一键展开所有未展开的子菜单
  document.getElementById('expandAllSubmenu').addEventListener('click', function() {
    document.querySelectorAll('.submenu:not(.open)').forEach(submenu => {
      submenu.querySelector('a').click();
    });
  });

  // 3. 切换整个左侧边栏的折叠/展开状态
  document.getElementById('toggleSidebar').addEventListener('click', function() {
    document.querySelector('.app-sidebar__toggle').click();
  });
});