Css3隐藏<li>元素并显示在</li> <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/