一次和别人争吵一个按钮,点击后显示导航;再点击不显示的效果,是否一定以及必须用js?

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。