点击侧边栏子项时菜单自动关闭，求保持展开的解决方案

1. 阻止子菜单点击触发父菜单折叠 #

添加以下JavaScript代码，阻止子菜单项的点击事件冒泡到父级treeview元素，避免父菜单被意外折叠：

// 监听所有子菜单项的点击事件
document.querySelectorAll('.treeview-menu a').forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止事件向上冒泡，避免触发父菜单的折叠逻辑
    e.stopPropagation();
  });
});

2. 页面加载时自动展开当前页面对应的父菜单 #

刷新页面后，为了让当前页面所在的父菜单保持展开状态，添加以下JS代码，根据当前URL匹配对应的子菜单，给父级treeview添加展开标识类：

document.addEventListener('DOMContentLoaded', function() {
  // 获取当前页面的文件名（比如 competitions.php）
  const currentPage = window.location.pathname.split('/').pop();
  
  // 遍历所有子菜单项
  document.querySelectorAll('.treeview-menu a').forEach(link => {
    // 匹配当前页面的链接
    if (link.getAttribute('href') === currentPage) {
      // 找到父级treeview元素，添加展开和激活类
      const parentTreeview = link.closest('.treeview');
      if (parentTreeview) {
        parentTreeview.classList.add('active', 'menu-open');
      }
    }
  });
});

3. 可选：后端辅助标记优化 #

如果你的项目支持后端渲染，可以在访问对应页面时，给当前子菜单项的<li>标签添加active类，这样前端逻辑可以更简化：

<!-- 示例：访问competitions.php时渲染的标记 -->
<li class="active"><a href="competitions.php"><i class="fa fa-plus"></i>Manage Competitions</a></li>

对应的简化JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const activeSubmenu = document.querySelector('.treeview-menu .active');
  if (activeSubmenu) {
    const parentTreeview = activeSubmenu.closest('.treeview');
    parentTreeview.classList.add('active', 'menu-open');
  }
});

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