Question

我试图在点击时创建一个切换器，将隐藏元素。所以，当它工作时，它会隐藏侧边栏，但我一直试图隐藏元素。

我正在使用 NextJS

<input type="checkbox" id="sidebarToggle" className={styles.sidebarToggle} />
<div className={styles.dashboard}>
  <div className={styles.sidebar}>
    <div className={styles.sidebarHeader}>
      <h3 class={styles.brand}>
        <span><img src="/unlink.svg" alt="unlink"/></span>
        <span>easyTechServ</span>
      </h3> 
      <label htmlFor="sidebarToggle"><img src="/menu-alt.svg" alt="menu-alt"/></label>
    </div>
  </div>
</div>

这是CSS：

.sidebarToggle:checked ~ .sidebar .sidebarHeader h3 span:last-child,
.sidebarToggle:checked ~ .sidebar li span:last-child {    
  display: none;
}

Answer 1

您的 CSS 选择器不正确。您尝试使用同级选择器 (~)，但 .sidebar 不是 .sidebarToggle 的同级选择器，因此它永远不会被隐藏。

此外，尽量不要过度指定您的 CSS 选择器并删除不必要的特殊性。

检查以下 HTML+CSS 片段：

.sidebarToggle:checked ~ .dashboard .brand span:last-child,
.sidebarToggle:checked ~ .dashboard li span:last-child {
  display: none;
}

.brand span:last-child {
  color: crimson;
}

<input type="checkbox" id="sidebarToggle" class="sidebarToggle" />
<div class="dashboard">
  <div class="sidebar">
    <div class="sidebarHeader">
      <h3 class="brand">
        <span><img src="/unlink.svg" alt="unlink"/></span>
        <span>easyTechServ</span>
      </h3>
      <label for="sidebarToggle">
        <img src="/menu-alt.svg" alt="menu-alt"/>
      </label>
    </div>
  </div>
</div>

NextJS 切换按钮不适用于 htmlFor

1 个答案: