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

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

  1. 常见问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。

    例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> ...

  2. 利用H5缓存机制实现点击按钮第一次与之后再点击分别跳转不同页面

    昨天碰到这样一个需求,要求点击按钮第一次跳转到a页面,之后再点击它就跳转到b页面.这个问题我首先就想到了利用H5的缓存sessionstorage来实现,SessionStorage用于本地存储一个会 ...

  3. vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  4. 一个按钮，如果5分钟内点击再次点击给予提示操作频繁，在JS里可以这样写

    很简单. 但是,如果你要离开这个页面再进来, 就没办法限制了. 除非用cookie 储存状态 给个示例 var isLock = flase; //定义全局变量 按钮点击事件: if(isLock){ ...

  5. Phaser提供了Button对象简单的实现一个按钮

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  6. Qt-第一个QML程序-3-自定义一个按钮

    项目基本信息前两个已经说了,这里直接放下运行截图, 对的,这里就是说上面的那个红色的按钮,这里需要了解Qml的动画和状态 这里先把整个按钮的代码写出来,一点一点写 Rectangle { id:clo ...

  7. JavaScript点击事件-一个按钮触发另一个按钮

    <input type="button" value="Click" id="C" onclick="Go();" ...

  8. 学霸笔记系列 - Python Selenium项目实战（一）—— 怎么去验证一个按钮是启用的（可点击）？

    Q: 使用 Python Selenium WebDriver 怎么去验证一个按钮是启用的(可点击)? A:Selenium WebDriver API 里面给出了解决方法is_enabled() 使 ...

  9. Android开发学习笔记--给一个按钮定义事件

    学习Android的第一天,了解了各种布局,然后自己动手画出了一个按钮,然后给按钮定义了一个事件是弹出一条消息显示“我成功了!”字样,具体过程如下: 1.修改布局文件activity_main.xml ...

随机推荐

  1. Linux下安装jdk步骤

    1.检查当前服务器中是否有安装jdkrpm -qa|grep java 2. 批量删除java rpm -qa | grep java | xargs rpm -e --nodeps 3. 安装jdk ...

  2. likelihood(似然) and likelihood function(似然函数)

    知乎上关于似然的一个问题:https://www.zhihu.com/question/54082000 概率(密度)表达给定下样本随机向量的可能性,而似然表达了给定样本下参数(相对于另外的参数)为真 ...

  3. wordpress二次开发第一个jquery对比

    $(document).ready(function(){ $("input").focus(function(){ $("input").css(" ...

  4. WebApiConfig设置返回json并且对于get,post可以重名

    webapi2默认返回的是xml格式的,并且一个控制器中的方法名不能重名,列如:一个get,一个post这个也是不允许的,这些我们都可以进行设置. 下面设置:返回json格式,并且一个控制器中的方法可 ...

  5. Asset Store 下载的package存在什么地方?

    发现从Asset store下载的packages都不知道放在了什么地方 Windows 7,C:\Users\<username>\AppData\Roaming\Unity\Asset ...

  6. ContentProvider 、 ContentResolver 、 ContentObserver

    说说ContentProvider . ContentResolver . ContentObserver 之间的关系**a. ContentProvider 内容提供者,用于对外提供数据 b. Co ...

  7. antd不想写那么多option怎么办

    做项目的时候发现如果下拉列表选项多的时候会写很多的 Option ,但是用到下拉列表的地方又超级多.所以自己写了一个方法,哪需要就放到哪. 记录一下方法.留待以后用 selectStreetIdCha ...

  8. iOS 从0到1搭建高可用App框架

    iOS 从0到1搭建高可用App框架 最近在搭建新项目的iOS框架,一直在思考如何才能搭建出高可用App框架,能否避免后期因为代码质量问题的重构.以前接手过许多“烂代码”,架构松散,底层混乱,缺少规范 ...

  9. 寻找AP数

    题目背景 正整数n是无穷的,但其中有些数有神奇的性质,我们给它个名字--AP数. 题目描述 对于一个数字i是AP数的充要条件是所有比它小的数的因数个数都没有i的因数个数多.比如6的因数是1 2 3 6 ...

  10. substr在oracle和mysql中的应用和区别

    Oracle: 书写格式: (1)Select  substr(字段名(string) , 起始位置(int) , 截取长度(int)) 示例: selectsubstr('123456',0,3)a ...