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

时间 2019-12-08

标签一次别人争吵一个按钮点击显示导航效果是否必定以及必须栏目 JavaScript 繁體版

原文原文链接

事情通过是这样的，咱们组一个说话很喜欢用必定，确定的哥们，吃午餐的时候拿了本身作的一个UI库，头部有一个按钮

html

点击展开，再次点击收缩，他意思说一个按钮没法记录点击状态，必须使用js。
而后我看了一眼，心想target有可能能作到这个效果，而后我说不必定，他仍是说确定，还要跟我打赌说：若是我能作出来，给我500块。若是我作不出怎样？ web

由于到底具体尚未实践过，并且我只是说不必定，因此我没有当场和他打赌，而后他就本身给我定条件说：若是作不出，你请你们吃顿饭。

app

听他这么说我就有点不高兴了，你本身说确定要用js，而我说 “不必定”，为毛要必定跟你打赌，要是你这么确定，你就给你的条件，我作出你给我500块就得了。（这种用咱们那边的话说，“死了还要捡把沙”，就是怕吃亏的意思）。

而后回来座位，我立刻写起来，而后我写完，他就找茬了，这个怎么收缩不对啊。而后我把收缩动画加上，他继续加各类条件：那你这样后退怎样办啊；刷新呢...... bili巴拉一大堆工具

彻底抛开了刚才咱们针对的点，这个效果，不用js 是否能够实现？动画

下面上一下我用target写的代码（撇开使用情景，只针对是否不用js实现），说一下个人思路吧：
2个按钮样式同样，点击的时候会依次切换，而后下面有2个标识了target的容器，根据这2个容器又能够找兄弟节点，设置按钮显示和隐藏。

demo连接：http://1.xmpros.sinaapp.com/target.html

spa

<!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次了，你这么自负怎样跟你愉快的沟通？
code