事情經過是這樣的，我們組一個說話很喜歡用一定，肯定的哥們，吃午飯的時候拿了自己做的一個UI庫，頭部有一個按鈕
點擊展開，再次點擊收縮，他意思說一個按鈕無法記錄點擊狀態，必須使用js。
然后我看了一眼，心想target有可能能做到這個效果，然后我說不一定，他還是說肯定，還要跟我打賭說：如果我能做出來，給我500塊。如果我做不出怎樣？
因為到底具體還沒有實踐過，而且我只是說不一定，所以我沒有當場和他打賭，然后他就自己給我定條件說： 如果做不出，你請大家吃頓飯。
聽他這么說我就有點不高興了，你自己說肯定要用js，而我說 “不一定”，為毛要一定跟你打賭，要是你這么肯定，你就給你的條件，我做出你給我500塊就得了。（這種用我們那邊的話說，“死了還要撿把沙”，就是怕吃虧的意思）。
然后回來座位，我馬上寫起來，然后我寫完，他就找茬了，這個怎么收縮不對啊。 然后我把收縮動畫加上，他繼續加各種條件：那你這樣后退怎樣辦啊；刷新呢...... bili巴拉一大堆
完全拋開了剛才我們針對的點， 這個效果，不用js 是否可以實現？
下面上一下我用target寫的代碼（撇開使用情景，只針對是否不用js實現），說一下我的思路吧：
2個按鈕樣式一樣，點擊的時候會依次切換，然后下面有2個標識了target的容器，根據這2個容器又可以找兄弟節點，設置按鈕顯示和隱藏。
demo鏈接：http://1.xmpros.sinaapp.com/target.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .p-wrap-2 { position: relative; top:30px; width: 500px; height: 300px; background: yellowgreen; overflow: hidden; -webkit-animation:.5s ease wrap_kf forwards; } @-webkit-keyframes wrap_kf { 0% { height: 0; } 100% { height: 300px; } } .p-wrap-2:target { overflow: hidden; -webkit-animation:.5s ease wrap_kf_2 forwards; } @-webkit-keyframes wrap_kf_2 { 0% { height: 300px; } 100% { height: 0; } } .p-wrap-1:target { border: 2px solid #D4D4D4; background-color: #e5eecc; display:none; } .nav { position: absolute; top: 0; } .p-wrap-1:target ~ .nav-1 { background: red; display: none; } .p-wrap-2:target ~ .nav-2 { background: blue; display: none; } </style> </head> <body> <div class="target_wrap"> <div class="p-wrap p-wrap-1" id="news1"></div> <div class="p-wrap p-wrap-2" id="news2"> <ul id="doc_navbar" class="doc-horizonal"> <li class="actived"><a href="###">開始使用</a></li> <li><a href="###">組件列表</a></li> <li><a href="###">下載和定制</a></li> <li><a href="###">關於和支持</a></li> <li><a href="###">開發者工具</a></li> <li class="doc-right"><a href="###">歷史版本</a></li> </ul> </div> <p class="nav nav-1"><a href="#news1">nav 1</a></p> <p class="nav nav-2"><a href="#news2">nav 1</a></p> </div> </body> </html>
其實我本意只想表達 話不能說得這么死 別說這么絕，一定，肯定這樣的詞盡量少用，同時最好適當考慮一下別人的感受，已經不是第1，2次了，你這么自負 怎樣跟你愉快的溝通？