css - 如何更改 CSS 中不相关元素的样式

Question

我仅使用 CSS 创建侧导航栏。我能够使用复选框触发器触发下拉菜单:

[type="checkbox"] {
    display: none;
    &:checked ~ div
    {
        display: block;
    }
}

HTML 结构:

<ul>
    <li>
        <input type="checkbox" id="chk1">
        <label for="chk1">Dropdown 1</label>
        <div class="dropnav">
           .. list of sub menu
        </div>
    </li>
    <li>
        <input type="checkbox" id="chk2">
        <label for="chk2">Dropdown 1</label>
        <div class="dropnav">
           .. list of sub menu
        </div>
    </li>
    <li>
        <input type="checkbox" id="chk3">
        <label for="chk3">Dropdown 1</label>
        <div class="dropnav">
           .. list of sub menu
        </div>
    </li>
</ul>

因此，正如您所看到的，当复选框被“选中”时，下一个同级 div 元素将是 display: block显示下拉菜单，它的工作。但是，我有多个下拉菜单，当其中一个打开时，我想关闭其他下拉菜单。例如，如果我触发 'chk1'，它将打开它的同级 'dropnav' 菜单，然后另一个 'dropnav' 将关闭( display: none )。这可能仅适用于 CSS 解决方案吗？

Answer 1

使用具有相同名称的类型 radio 而不是复选框:

[type="radio"] {
  display: none;
}

.dropnav {
  display: none;
}

[type="radio"]:checked~div {
  display: block;
}

<ul>
  <li>
    <input type="radio" name="c" id="chk1">
    <label for="chk1">Dropdown 1</label>
    <div class="dropnav">
      .. list of sub menu
    </div>
  </li>
  <li>
    <input type="radio" name="c" id="chk2">
    <label for="chk2">Dropdown 1</label>
    <div class="dropnav">
      .. list of sub menu
    </div>
  </li>
  <li>
    <input type="radio" name="c" id="chk3">
    <label for="chk3">Dropdown 1</label>
    <div class="dropnav">
      .. list of sub menu
    </div>
  </li>
</ul>