如何仅使用SCSS切换display:block与display:none实现导航菜单显隐

纯CSS本身不支持直接监听点击事件并持久化状态，要实现需求需要对原有HTML做少量适配调整，核心是借助CSS可识别的状态伪类模拟点击切换效果。如果完全不改动现有HTML结构，无法仅用CSS实现该需求。

方案1：使用:target伪类实现（改动最小） #

仅需要给a标签加跳转哈希、给对应菜单加id即可实现，调整后HTML代码：

<div>
    <ul>
       <li class="option-1"><a href="#list1">option 1</a></li>
       <li class="option-2"><a href="#list2">option 2</a></li>
    </ul>

    <ul class="list-1" id="list1">
       <li>option</li>
       <li>option</li>
    </ul>

    <ul class="list-2" id="list2">
       <li>option</li>
       <li>option</li>
    </ul>
</div>

对应SCSS代码：

// 默认隐藏所有菜单列表
.list-1, .list-2 {
  display: none;
}
// 初始默认展示list-1，可按需调整
.list-1 {
  display: block;
}
// 点击option1后匹配哈希，显示list1隐藏list2
#list1:target {
  display: block;
  ~ .list-2 {
    display: none;
  }
}
// 点击option2后匹配哈希，显示list2
#list2:target {
  display: block;
}

• 优点：HTML改动极小，逻辑简单易维护
• 缺点：点击后会修改页面URL的哈希值，会影响浏览器前进后退行为

方案2：使用隐藏单选框实现（无URL改动，体验更好） #

通过互斥的单选框记录选中状态，点击label触发状态切换，不会修改URL，调整后HTML代码：

<div class="mega-menu">
    <!-- 隐藏的单选框，用于记录点击状态，name相同保证互斥 -->
    <input type="radio" name="menu-switch" id="opt1" checked hidden>
    <input type="radio" name="menu-switch" id="opt2" hidden>
    <ul>
       <li class="option-1"><label for="opt1">option 1</label></li>
       <li class="option-2"><label for="opt2">option 2</label></li>
    </ul>

    <ul class="list-1">
       <li>option</li>
       <li>option</li>
    </ul>

    <ul class="list-2">
       <li>option</li>
       <li>option</li>
    </ul>
</div>

对应SCSS代码：

.mega-menu {
  .list-1, .list-2 {
    display: none;
  }
  // 选中option1时显示list1
  #opt1:checked ~ .list-1 {
    display: block;
  }
  // 选中option2时显示list2
  #opt2:checked ~ .list-2 {
    display: block;
  }
  // 可选扩展：给当前选中的导航项加高亮样式
  #opt1:checked ~ ul .option-1 label {
    color: #1677ff;
  }
  #opt2:checked ~ ul .option-2 label {
    color: #1677ff;
  }
}

• 优点：不会修改URL，切换状态稳定，可扩展性强
• 缺点：HTML改动量比方案1稍高

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