没有JS的点击下拉列表

Question

我想在用户点击元素时让我的下拉菜单停留。目前，当用户悬停超过元素时会显示，如下所示：

div.nav ul li:hover ul {
    display: list-item;
    position: absolute;
}

我可以将hover选择器更改为active，但这不会使下拉列表保持单击（释放点击将隐藏它）。

我的问题是，是否可以在没有javascript的情况下点击下拉？

Answer 1

是的，这是完全可能的 - 您可以从隐藏输入的已检查状态确定兄弟列表的可见性：

选项1，:checked

＆＃13;

＆＃13;

li,
input:checked + ul {
  display: block
}
ul ul,
input {
  display: none;
}

＆＃13;

<ul>
  <li>
    <label for="menuTrigger">Item</label>
    <input id="menuTrigger" type="checkbox" />
    <ul>
      <li>Sub item</li>
      <li>Sub item</li>
      <li>Sub item</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

选项2，:target

或者，使用:target伪，虽然取决于您的体系结构，但这可能不适合路由配置。此外，列表一旦显示就无法切换（除非启动了替代:target）。

＆＃13;

＆＃13;

li,
ul:target {
  display: block
}
ul ul,
input {
  display: none;
}

＆＃13;

<ul>
  <li>
    <a href="#show">Item</a>
    <ul id="show">
      <li>Sub item</li>
      <li>Sub item</li>
      <li>Sub item</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;