事情经过是这样的，我们组一个说话很喜欢用一定，肯定的哥们，吃午饭的时候拿了自己做的一个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. 2018.11.18 Sturts2配置详解&常量配置进阶

    1.基于struts.xml 的节点参数配置 package节点 action节点 result节点 include节点 2.struts常量配置以及如何修改为自己的想要的配置 2.1struts默认 ...

  2. Ajax，Json数据格式

    同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待     卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随     意做其他事 ...

  3. Retain NULL values vs Keep NULLs in SSIS Dataflows - Which To Use? (转载)

    There is some confusion as to what the various NULL settings all do in SSIS. In fact in one team whe ...

  4. swiper插件使用技巧

    1.加载插件: <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href ...

  5. Vue nodejs商城项目-登录模块

    一.登录功能 后端server/routes/users.js var User = require('./../models/users.js');   // 二级路由 // 登录接口 router ...

  6. linux简介及虚拟机安装

    1.简介 计算机组成

  7. 你不知道的javaScript笔记(6)

    语法 语句表达式 句子是完整表达某个意思的一组词,由一个或多个短语组成,他们之间由标点符号或者连接词连接起来. 语句相当于句子,表达式相当于短语,运算符则相当于标点符号和连接词. JavaScript ...

  8. PHP大数组,大文件的处理

     [原文来自于转载, 但他的结论不太正确, 尤其对foreach的判断这块上,  我拎过来进行修理 ]   在做数据统计时,难免会遇到大数组,而处理大数据经常会发生内存溢出,这篇文章中,我们聊聊如何处 ...

  9. ABAP术语-Function Module

    Function Module 原文:http://www.cnblogs.com/qiangsheng/archive/2008/02/18/1071827.html General-purpose ...

  10. LVS NAT,DR,TUN三种负载原理

    负载均衡简单介绍 用通俗的话来说负载均衡,就是通过不同的调度机制将用户的请求分派到后端不同的服务器.缓解服务器的请求压力,实现负载均衡的方案有多种,下面简单说说了解的几种方式: DNS 负载:利用DN ...