事情经过是这样的，我们组一个说话很喜欢用一定，肯定的哥们，吃午饭的时候拿了自己做的一个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. CF578C Weakness and Poorness

    嘟嘟嘟 题面:给一个序列中的,每一个数都减去一个实数x,使得到的新序列的max(最大连续和,|最小连续和|)最小.(|ai| <= 10000) 感性的想想,会发现最大连续和随x变大而变小,最小 ...

  2. focal loss和retinanet

    这个是自己用的focal loss的代码和公式推导:https://github.com/zimenglan-sysu-512/Focal-Loss 这个是有retinanet:https://git ...

  3. labelme也可以标注polygan

    https://blog.csdn.net/wc781708249/article/details/79595174 按照这个安装就可以了 sudo apt-get install python-qt ...

  4. markdown的常用高级操作。

    符号 说明 对应编码(使用时去掉空格) 英文怎么说 & AND 符号 & amp; ampersand < 小于 & lt; little 大于 & gt; gr ...

  5. svn cleanup failed–previous operation has not finished; run cleanup if it was interrupted

    svn提交遇到恶心的问题,可能是因为上次cleanup中断后,进入死循环了. 错误如下: 解决方法:清空svn的队列 1.下载sqlite3.exe 2.找到你项目的.svn文件,查看是否存在wc.d ...

  6. grunt_beginner

    前端集成解决方案:一套包含框架 和 工具,便于开发者快速构建美丽实用的web应用程序的工作流,同时 这套工作流必须是稳健强壮的. Yeman Bower web包管理器 框架.库.公共部分 Grunt ...

  7. java使用JSCH连接FTP(Linux服务器)上传文件到Linux服务器

    首先需要用到jsch-0.1.54.jar 包: 链接: https://pan.baidu.com/s/1kZR6MqwpCYht9Pp_D6NKQw 密码: gywx 直接上代码: package ...

  8. ATK-DataPortal 设计框架（三）

    边界清晰.服务自治.契约共享.基于策略的兼容性,是面向对向设计时四个基本原则,我们的应用可能分布在不同的环境之中,应用可能在同一服务器中,也可能在不同的网络环境中,保证框架的基类能在不同环境中仍然可用 ...

  9. JavaScript运算操作符

    1. "+" (1)数学运算 var a = 1 + 1; console.log(a); //输出值为2 (2)字符串连接 (任何数据类型加字符串都等于 字符串) var ini ...

  10. 关于echarts整合多个类似option

    最近项目里面遇到一些图表需要用echarts来做.而我之前只用过一次echarts,也只是做了一个简单的饼状图,并没有涉及到很多的配置.但是现在这个项目,这些图表需要自己配置很多东西.像什么多余的网格 ...