事情经过是这样的，我们组一个说话很喜欢用一定，肯定的哥们，吃午饭的时候拿了自己做的一个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次了，你这么自负 怎样跟你愉快的沟通？