事情经过是这样的，我们组一个说话很喜欢用一定，肯定的哥们，吃午饭的时候拿了自己做的一个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. POSIX多线程—线程基本概念

    http://blog.csdn.net/livelylittlefish/article/details/7957007 作者:阿波链接:http://blog.csdn.net/livelylit ...

  2. html默认样式重置

    几个著名的重置css   goal https://meyerweb.com/eric/tools/css/reset/ 雅虎 https://yuilibrary.com/yui/docs/cssr ...

  3. c# 常见验证邮箱、电话号码、日期等格式

    #region 验证邮箱验证邮箱 /**//// <summary> /// 验证邮箱 /// </summary> /// <param name="sour ...

  4. lucene&solr学习——创建和查询索引(代码篇)

    1. Lucene的下载 Lucene是开发全文检索功能的工具包,从官网下载Lucene4.10.3并解压. 官网:http://lucene.apache.org/ 版本:lucene7.7.0 ( ...

  5. WPF中 ItemsSource 和DataContext不同点

    此段为原文翻译而来,原文地址 WPF 中 数据绑定 ItemSource和 DataContext的不同点: 1.DataContext 一般是一个非集合性质的对象,而ItemSource 更期望数据 ...

  6. ContentProvider 、 ContentResolver 、 ContentObserver

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

  7. 自定义App首次启动引导页

    代码如下 #import"ZBGuidePageView.h" @interfaceZBGuidePageView()<UIScrollViewDelegate> @p ...

  8. Sass 基础(四)

    当你想设置属性值的时候你可以使用字符串插入进来,另一个使用的用法是构建一个选择器. @mixin generate-sizes($class,$small,$medium,$big){ .#{$cla ...

  9. JetBrains 授权服务器(License Server):

    JetBrains 授权服务器(License Server): https://www.imsxm.com/jetbrains-license-server.html

  10. 选择客栈（noip2011 day1 t2）

    题目描述 丽江河边有 n 家很有特色的客栈,客栈按照其位置顺序从 1 到 nn n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k−1 表示),且每家客栈都设有一家咖啡店,每 ...