没有for =的CSS复选框黑客

Question

我正在尝试使用复选框hack来显示和隐藏外部链接列表，而不使用for=和JavaScript。

HTML：

<label class="tog">
  <input type="checkbox" class="tog-check">
  <div class="tog-list">
    <a href="http://www.google.com">Google</a>
    <a href="http://www.yahoo.com">Yahoo</a>
    <div class="tog-less">
      hide
    </div>
  </div>
  <div class="tog-more">
    show
  </div>
</label>

CSS：

label.tog{
  display:block;
  cursor:pointer;
}
input.tog-check{
  position: absolute;
  top: -9999px;
  left: -9999px;
}
div.tog-list{
  display:none;
}
input.tog-check:checked ~ div.tog-list {
  display:block;
}
input.tog-check:checked ~ div.tog-more {
  display:none;
}
input.tog-check:unchecked ~ div.tog-more {
  display:block;
}
input.tog-check:unchecked ~ div.tog-list {
  display:none;
}
div.tog-list a{
  display:block;
  padding:8px 4px;
  border-bottom:1px solid #eee;
}
.tog-more, .tog-less{
  padding:8px 4px;
  border-bottom:1px solid #eee;
}

您可以看到它有效 。 但这是无效的HTML，因为标签内不允许流内容。

标签外是否可以有.tog-list ，但仍然具有显示/隐藏功能？ 还是我坚持使用for= ？ 还是可以解决这个问题？

Answer 1

我知道这是一个非常老的问题，但是我碰巧遇到了这个问题，这激起了我的兴趣。

您不必将所有内容都放在标签中，只需将输入放置在show / hide元素上即可。

例如

 .tog{ display:block; position:relative; color:#ccc; cursor:pointer; font-weight:normal; margin:0; } .tog * { box-sizing:border-box; } .tog-check { position:absolute; bottom:0px; right:0px; left:0px; width:100%; height:2.5em; opacity:0.00015; outline:1px solid red; box-sizing:border-box; } .tog div { overflow:hidden; max-height:100px; } .tog-list { transition:0.5s; } .tog .tog-list, .tog .tog-less, .tog .tog-check:checked ~ .tog-more { max-height:0px; } .tog .tog-check:checked ~ .tog-list, .tog .tog-check:checked ~ .tog-less { max-height:100px; } .tog-list a, .tog-more, .tog-less { display:block; padding:0px 4px; line-height:2em; } .tog-list a{ border-bottom:1px solid #eee; } 

 <div class="tog"> <input type="checkbox" class="tog-check" /> <div class="tog-list"> <a href="http://www.google.com" target="_blank">Google</a> <a href="http://www.yahoo.com">Yahoo</a> </div> <div class="tog-less">[-] less</div> <div class="tog-more">[+] more</div> </div> 

http://jsfiddle.net/4jzns/5/