事情经过是这样的，我们组一个说话很喜欢用一定，肯定的哥们，吃午饭的时候拿了自己做的一个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. gluon实现softmax分类FashionMNIST

    from mxnet import gluon,init from mxnet.gluon import loss as gloss,nn from mxnet.gluon import data a ...

  2. [18/11/26] this关键字、static关键字和静态块(及语句块)

    1.this关键字 this的本质就是“创建好的对象的地址”!  由于在构造方法调用前,对象已经创建.因此,在构造方法中也可以使用this代表“当前对象” [用法]   1.  在程序中产生二义性之处 ...

  3. 【洛谷P4568】[JLOI2011]飞行路线

    飞行路线 题目链接 今天上午模拟考试考了原题,然而数组开小了,爆了4个点. 据王♂强dalao说这是一道分层图SPFA的裸题 dis[i][j]表示到点i用k个医疗包的最小消耗,dis[u][j]+e ...

  4. 【luogu P1262 间谍网络】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1262 注意: 1.缩点时计算出入度是在缩完点的图上用color计算.不要在原来的点上计算. 2.枚举出入度时 ...

  5. js使用hover事件做一个“个人中心”的浮动层

    原材料知识点:hover html: css:

  6. 11.多线程&&并发

    11.1 操作系统中线程和进程的概念 一些常见的概念: 程序:指令和数据的byte序列,eg:qq.exe;a2. 进程:正在运行的程序(如QQ);a3.一个进程中可能有一到多个线程. 线程的概念:T ...

  7. 阿里云服务器redis启动绑定ip 开放端口仍无法访问问题

    今天使用云服务器其redis 始终无法访问.redis.conf 这个配置文件也是改了又改.最后发现 执行redis启动命令时没有带上配置文件.仍然使用默认配置. src/redis-server  ...

  8. iOS | 地图定位

    在IOS开发中,最常见的功能之一就是地图定位功能,不单单是百度地图,高德地图等专业的地图导航软件,还有美团,咕咚等一些美食购物类和运动类也需要这样的功能,所以学会这项技能是一名IOS开发工程师必须的. ...

  9. Spring的声明式事务----Annotation注解方式（1）

    这里列一个小的demo工程,直接利用Spring的jdbcTemplate访问Mysql数据库. 工程结构: 数据库中的tbl_student表结构如下: 数据实体类Student.java代码如下: ...

  10. Java中的文件和stream流的操作代码

    1.Java中FileRead方法的运用代码及详解 package example2;import java.io.FileReader;import java.io.IOException;clas ...