点击侧边栏下拉菜单链接项后菜单如何保持展开不关闭？

你遇到的菜单自动闭合，核心是侧边栏的全局事件逻辑导致的：

• 你之前尝试的e.preventDefault()完全用错了：这个API是阻止a标签的默认跳转行为，会直接让链接点了没反应，根本不影响下拉菜单的开合逻辑，自然达不到效果
• 你之前尝试的e.stopPropagation()思路方向对，但大概率没生效的原因是：
  1. 事件绑定时机太早，DOM还没渲染完成，选择器没匹配到对应的a标签，监听器根本没注册成功
  2. 下拉菜单的闭合逻辑是绑定在document或者侧边栏根容器上的捕获阶段，就算事件停止冒泡，也已经被闭合逻辑监听器捕获执行了

方案1：适配整页跳转的场景（对应你代码里Django模板渲染的URL，就是典型的整页刷新逻辑） #

因为点击a标签后页面会整体刷新，你根本不需要在当前页面拦截跳转，只要在页面加载完成后，自动把当前选中菜单项对应的父级下拉菜单设为展开状态即可，对应代码：

// 等DOM完全加载完成后执行
document.addEventListener("DOMContentLoaded", () => {
  // 遍历下拉容器里的所有链接
  document.querySelectorAll('.dropdown-container a').forEach(link => {
    // 匹配当前页面路径和链接地址
    if (link.getAttribute('href') === window.location.pathname) {
      // 找到链接所属的下拉容器
      const dropdownBox = link.closest('.dropdown-container')
      // 给容器和触发按钮加上展开状态
      dropdownBox.style.display = 'block'
      dropdownBox.previousElementSibling.classList.add('active')
    }
  })
})

这个方案的好处是完全不打断原有a标签的跳转逻辑，跳转完成后打开的页面自动保持上次展开的下拉状态，根本不会出现跳转后菜单收起来的问题。

方案2：适配单页应用无刷新跳转的场景 #

如果你是前端路由跳转、不会触发整页刷新，只需要正确给下拉链接加上停止冒泡的逻辑，不让点击事件触发全局的“收起所有下拉”的监听即可，修正后的代码：

// 用事件委托绑定监听器，确保不管DOM是静态渲染还是动态生成，都能触发拦截逻辑
$(document).on('click', 'div.dropdown-container a', function(e) {
  // 只阻止事件向上层容器冒泡，不阻止a标签本身的跳转行为
  e.stopPropagation();
})

注意避坑：不要在这里加e.preventDefault()，不然a标签的原生跳转就失效了。

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