Question

我正在尝试使用复选框黑客来显示和隐藏外部链接列表，而不使用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;
}

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

是否可以在标签外设置.tog-list但仍具有显示/隐藏功能？还是我坚持使用for=？或者有什么方法可以解决这个问题吗？

Answer 1

我知道这是一个非常古老的问题，但我刚刚发生了它，它引起了我的兴趣。

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

E.G

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

没有for =的CSS复选框hack

1 个答案: