html - Css3 隐藏 <li> 元素并出现在 <li> 点击

Question

http://jsfiddle.net/EUFrH/

我希望从列表中隐藏“subline”行，当单击“sub”行时，它会将其他行向下推以显示“subline”li。

只是在寻找一种无需使用 Js 或 Jquery 的方法

提前致谢!

Answer 1

您可以尝试使用 <input type="checkbox"> 来做到这一点或 <input type="radio"> . 例如，此处描述了该技术:http://www.inserthtml.com/2012/04/css-click-states/

不幸的是，您当前的标记似乎无法做到这一点。 可以这样修改 HTML:

<li class="sub">
  <label for="subline-enabler">
    ... content omitted ...
  </label>
  <input type="checkbox" id="subline-enabler" />
  <ul class="subline">
    <li>
      ... content omitted ...
    </li>
  </ul>
</li>

演示在这里:http://jsfiddle.net/EUFrH/3/