如何更改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"菜单，然后另一个"dropnaw"将关闭(display: none(。这对于只使用CSS的解决方案来说可能吗？

Answer 1

使用具有相同名称的类型单选，而不是复选框：

[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>