CSS checkbox hack without for =

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

你可以看到it works。但這是無效的HTML，因爲標籤內部不允許流內容。

標籤外部是否有.tog-list但仍具有顯示/隱藏功能？或者我堅持使用for=？或者有沒有辦法解決這個問題？

Answer 1

我知道這是一個非常古老的問題，但我剛碰到它，它激起了我的興趣。

您不必將所有內容都放在標籤中，只需將輸入置於的顯示/隱藏元素上即可。

E.G

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