进入index首页时如何自动最小化侧边栏 触发折叠按钮的实现方法

实现方案 #

方案1：复用现有模板判断逻辑（推荐） #

你现有代码已经通过segment变量判断首页状态，直接在页面中插入以下JS代码即可：

document.addEventListener('DOMContentLoaded', function() {
  {% if 'index' in segment %}
    const collapseBtn = document.getElementById('mobile-collapse');
    // 确保按钮元素存在后再触发点击
    if (collapseBtn) collapseBtn.click();
  {% endif %}
});

把这段代码放在sidebar.html的末尾，或者页面通用的脚本加载区域即可，逻辑和你现有首页高亮的判断逻辑完全一致，不会影响其他页面。

方案2：纯前端路径判断 #

如果不想依赖后端模板变量，可以用原生JS判断当前页面路径是否为首页：

document.addEventListener('DOMContentLoaded', function() {
  // 若首页路径不是根路径`/`，修改为你实际的首页路径即可
  if (window.location.pathname === '/') {
    const collapseBtn = document.getElementById('mobile-collapse');
    if (collapseBtn) collapseBtn.click();
  }
});

补充说明 #

• 如果你用的后台模板依赖jQuery，也可以用简化写法：

// jQuery版本
$(function() {
  {% if 'index' in segment %}
    $('#mobile-collapse').click();
  {% endif %}
});

• 加DOMContentLoaded监听是为了确保按钮元素已经加载完成，避免出现获取不到元素的报错，如果脚本本身就是放在body标签末尾加载，也可以去掉这层监听。

如果出现点击不生效的情况，大概率是侧边栏的折叠事件还没绑定完成，可以加个短延时处理：

document.addEventListener('DOMContentLoaded', function() {
  {% if 'index' in segment %}
    const collapseBtn = document.getElementById('mobile-collapse');
    if (collapseBtn) {
      setTimeout(() => collapseBtn.click(), 50);
    }
  {% endif %}
});

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