移动端汉堡菜单：如何设置二级菜单内一级菜单项的全背景选中样式

嘿，我来帮你搞定这个移动端菜单的样式难题！结合你描述的情况，咱们一步步拆解问题，给出具体的解决方案：

1. 先搞定样式优先级问题：为什么新样式不生效？ #

你说已经给「Papierbasteln」加了新的全背景色样式，但还是显示左侧边框，大概率是原来的左侧边框样式优先级更高，把你的新样式覆盖了。

举个例子，假设你原来的一级菜单项样式是这样的：

.mobile-menu__item {
  border-left: 5px solid #某颜色;
  padding: 10px 15px;
  /* 其他基础样式 */
}

那你需要给选中状态的菜单项加一个自定义类（比如 .active），并且让这个类的选择器优先级更高，比如：

/* 优先级比基础样式高，确保能覆盖 */
.mobile-menu__item.active {
  border-left: none; /* 彻底移除左侧边框 */
  background-color: #你的背景色; /* 替换成你想要的全背景色 */
  color: #fff; /* 可选：调整文字颜色，提升可读性 */
}

如果原来的基础样式是带父级选择器的（比如 .nav-container .mobile-menu__item），那你的选中样式也要带上相同的父级，保证优先级：

.nav-container .mobile-menu__item.active {
  /* 样式同上 */
}

2. 解决:focus只触发:active的问题：用JS切换类替代伪类 #

移动端的交互逻辑和桌面端不一样：点击元素后，:focus 状态不会持久保留，只会在点击瞬间触发 :active，所以用伪类做持久的选中样式根本行不通。

正确的做法是通过JavaScript给点击的菜单项手动添加/移除 .active 类，这样样式能一直保留到你再次点击取消。

假设你的HTML结构大概是这样的：

<button class="hamburger-btn">☰</button>
<ul class="mobile-menu">
  <li class="mobile-menu__item" data-has-submenu>
    Papierbasteln
    <ul class="submenu">
      <!-- 你添加的一级菜单项副本 -->
      <li class="submenu__header">Papierbasteln</li>
      <li>子菜单选项1</li>
      <li>子菜单选项2</li>
    </ul>
  </li>
  <!-- 其他一级菜单项 -->
</ul>

对应的JS代码可以这么写：

// 获取所有带二级菜单的一级菜单项
const menuItems = document.querySelectorAll('.mobile-menu__item[data-has-submenu]');

menuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 切换.active类，实现选中/取消选中的样式切换
    this.classList.toggle('active');
    // 同步切换二级菜单的显示/隐藏
    const submenu = this.querySelector('.submenu');
    submenu.classList.toggle('show');
  });
});

这样，当你点击「Papierbasteln」时，它会立刻加上 .active 类，样式变成全背景色；再次点击时，类会被移除，回到原来的左侧边框样式。

3. 针对二级菜单里的「Papierbasteln」副本的样式处理 #

如果你是把一级菜单项的副本放在二级菜单顶部，直接给这个副本加对应的样式就行，比如：

.submenu__header {
  background-color: #和.active一样的背景色;
  border-left: none;
  padding: 10px 15px;
  /* 其他和.active类一致的样式 */
}

或者直接给这个副本也加上 .active 类，复用之前写好的样式。

4. 调试小技巧帮你排查问题 #

• 打开浏览器开发者工具（按F12），选中「Papierbasteln」元素，看「Styles」面板：如果你的新样式被划掉了，说明优先级不够，调整选择器就行。
• 看「Elements」面板里的元素class列表，确认点击后 .active 类有没有被正确添加。

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