具有严格要求的可点击、可切换的 css 菜单（无 js）

Question

出于好奇，我正在尝试提供带有子菜单（无 js）的纯 CSS 菜单。

要求是：

• 应该可以折叠所有子菜单
• 只能同时显示一个子菜单
• 不使用悬停：鼠标点击时触发子菜单
• 没有javascript

这是我到目前为止所做的：

链接到jsfiddle 和下面的代码sn-p：

// no javascript

label {
  cursor: pointer;
  user-select: none;
}
label:hover {
  text-decoration: underline;
}

ul > li > ul {
  display: none;
}

#example1,
#example2,
#example3,
#example4 {
  background: #eee;
  display: inline-block;
}

#example1 > li > input,
#example2 > li > input {
  /*display: none;*/
}
#example1 > li > input:checked + ul,
#example2 > li > input:checked + ul {
  display: block;
}

#example3 > li > input[type="radio"]:checked + input[type="checkbox"]:checked + ul {
  display: block;
}

#example4:hover > li > input[type="radio"]:checked + ul {
  display: block;
}

<h3>Can collapse all, <u>BUT</u> can't display a sigle submenu at the time</h3>
<ul id="example1">
  <li>
    <label for="categories">Category</label>
    <input id="categories" type="checkbox">
    <ul>
      <li>cars</li>
      <li>animals</li>
    </ul>
  </li>
  <li>
    <label for="settings">Settings</label>
    <input id="settings" type="checkbox">
    <ul>
      <li>general</li>
      <li>notifications</li>
    </ul>
  </li>
</ul>

<h3>Can display a sigle submenu at the time, <u>BUT</u> can't collapse all</h3>
<ul id="example2">
  <li>
    <label for="categories2">Category</label>
    <input id="categories2" type="radio" name="menu">
    <ul>
      <li>cars</li>
      <li>animals</li>
    </ul>
  </li>
  <li>
    <label for="settings2">Settings</label>
    <input id="settings2" type="radio" name="menu">
    <ul>
      <li>general</li>
      <li>notifications</li>
    </ul>
  </li>
</ul>

<h3>Can display a sigle submenu at the time <u>and</u> can collapse all, <u>BUT</u> requires more then 1 click</h3>
<ul id="example3">
  <li>
    <label for="categories3check">Category</label>
    <input id="categories3radio" type="radio" name="menu">
    <input id="categories3check" type="checkbox">
    <ul>
      <li>cars</li>
      <li>animals</li>
    </ul>
  </li>
  <li>
    <label for="settings3check">Settings</label>
    <input id="settings3radio" type="radio" name="menu">
    <input id="settings3check" type="checkbox">
    <ul>
      <li>general</li>
      <li>notifications</li>
    </ul>
  </li>
</ul>

<h3>Can display a sigle submenu at the time <u>and</u> can collapse all, <u>BUT</u> uses hover and if radio is selected it opens submenu on hover</h3>
<ul id="example4">
  <li>
    <label for="categories4radio">Category</label>
    <input id="categories4radio" type="radio" name="menu">
    <ul>
      <li>cars</li>
      <li>animals</li>
    </ul>
  </li>
  <li>
    <label for="settings4radio">Settings</label>
    <input id="settings4radio" type="radio" name="menu">
    <ul>
      <li>general</li>
      <li>notifications</li>
    </ul>
  </li>
</ul>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

我试图跳出框框思考，但没有选择。

应该是这样的：

链接到jsfiddle 和下面的代码sn-p，带有大量的jQuery：

$("span").click(function() {
  var display = $(this).next()[0].style.display;
  $("ul > li > ul").hide();
  if (display == "" || display == "none")
    $(this).next().show();
  else if (display == "block")
    $(this).next().hide();
});

ul > li > ul {
  display: none;
}

span {
  user-select: none;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>Category</span>
    <ul>
      <li>cars</li>
      <li>animals</li>
    </ul>
  </li>
  <li>
    <span>Settings</span>
    <ul>
      <li>general</li>
      <li>notifications</li>
    </ul>
  </li>
</ul>

这样的子菜单功能可以不用js来完成吗？如果是，如何。如果不是，为什么不呢？只要使用 html/css 而没有 js，任何顺序的任何数量的 hack 都是可以接受的。

Answer 1

您可以在label 上使用:focusevent 进行切换 - 请注意，这仅在您将tabindex 属性设置为label 时才有效。

请看下面的演示：

label {
  cursor: pointer;
  user-select: none;
}

label:hover {
  text-decoration: underline;
}

ul>li>ul {
  display: none;
}

#example1 {
  background: #eee;
  display: inline-block;
}

#example1>li>input {
  display: none;
}

#example1>li>label:focus~ul {
  display: block;
}

label:focus {
  outline: none;
}

<ul id="example1">
  <li>
    <label tabindex='-1' for="categories">Category</label>
    <input id="categories" type="checkbox">
    <ul>
      <li>cars</li>
      <li>animals</li>
    </ul>
  </li>
  <li>
    <label tabindex='-1' for="settings">Settings</label>
    <input id="settings" type="checkbox">
    <ul>
      <li>general</li>
      <li>notifications</li>
    </ul>
  </li>
</ul>

Answer 2

这个答案建立在@kuzkuz 使用:focus 的答案之上。非常感谢@kuzkuz。

ide 是另一个透明的“隐藏”跨度，显示在:focus 上并位于菜单链接的顶部。单击“隐藏”跨度将导致“取消焦点”菜单项。

// no javascript

label {
  cursor: pointer;
  user-select: none;
  text-decoration: underline;
}

ul>li>ul {
  display: none;
  position: relative;
  top: -20px;
  margin-top: 0;
}

#example1 {
  display: inline-block;
}

#example1>li>input {
  display: none;
}

#example1>li>label:focus~ul {
  display: block;
}

label:focus {
  outline: none;
}

label:focus + .hider {
  width: 60px;
  height: 20px;
  display: block;
  position: relative;
  top: -20px;
  cursor: pointer;
  /* background: rgba(255,0,0,0.2); */
}

.visible {
  background: rgba(255,0,0,0.2);

<h3>Invisible hider</h3>
<ul id="example1">
  <li>
    <label tabindex='-1' for="categories">Category</label>
    <span class="hider"></span>
    <input id="categories" type="checkbox">
    <ul>
      <li>cars</li>
      <li>animals</li>
    </ul>
  </li>
  <li>
    <label tabindex='-1' for="settings">Settings</label>
    <span class="hider"></span>
    <input id="settings" type="checkbox">
    <ul>
      <li>general</li>
      <li>notifications</li>
    </ul>
  </li>
</ul>

<h3>Visible hider for demonstation purposes</h3>
<ul id="example1">
  <li>
    <label tabindex='-1' for="categories">Category</label>
    <span class="hider visible"></span>
    <input id="categories" type="checkbox">
    <ul>
      <li>cars</li>
      <li>animals</li>
    </ul>
  </li>
  <li>
    <label tabindex='-1' for="settings">Settings</label>
    <span class="hider visible"></span>
    <input id="settings" type="checkbox">
    <ul>
      <li>general</li>
      <li>notifications</li>
    </ul>
  </li>
</ul>

编辑：这里是基于这个愚蠢概念的样式更好看的版本：codepen