不使用JS，使用CSS3 target 以及动画效果实现，点击一下弹出，并且保持弹出状态，然后再点击一下弹回的导航栏（或者可以叫做按钮）

本文链接：https://blog.csdn.net/qq_29469941/article/details/52534942

<!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;
            }
        }
        /* 只要wrap2出现,就会执行这一段,会看到动画效果和最后完整的wrap2。 */


        .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;
            }
        }
        /*
        通过对点击nav-2,来触发 news2的target 样式。
        效果为将p-wrap-2的样式隐藏,执行动画。
        */



        .nav {
            position: absolute;
            top: 0%;
        }

        .p-wrap-1:target ~ .nav-1 {

            display: none;

        }

        .p-wrap-2:target ~ .nav-2 {

            display: none;
        }
        /*
       nav 通过绝对定位 定位在最上方。
       然后通过  锚事件 的点击执行隐藏 nav的效果。
       点击某一个之后,如果有别的隐藏的,那么隐藏的就会显示出来。
       因为随便点击下边的一个a标签,如果有隐藏的,就会显示出来。所以推断有这样一个自动的效果。
       */

    </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">111111111</a></p>
    <p class="nav nav-2"><a href="#news2">222222222</a></p>
</div>


</body>
</html>

实际原理也就是一个动画的播放，伸缩或者展开某一区域。然后加上配以 按钮（上面是1111111 和222222）的消失，出现。

用到了CSS3 动画效果+target都是CSS3的效果。

A~B选择器。

element1~element2 选择器 element1 之后出现的所有 element2。之前出现的即使是相同父元素也不会选择。

两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

大概过程为如下

按钮显示为11111111，则显示p-wrap-1，pwrap1没有样式，显示为空白。

点击111111111之后，111111会消失。

根据一个内部的机制，会显示22222222。p-wrap-2激活。

（因为发现随便点击一个a之后，其他的a都会显示出来，所以才可以只写一个按钮的消失，不用写另一个按钮的出现，他内部机制就会自动调用其他按钮的出现）

按钮显示为22222222，p-wrap-2是一个带着展开动画效果的div。我们就可以看到一个弹出的div效果。

当我们点击2222222时，会激活id为news2的一个target。执行p-wrap-2：target。这个样式是做的div的收缩动画效果。

下边为作者解释

2个按钮样式一样，点击的时候会依次切换，然后下面有2个标识了target的容器，根据这2个容器又可以找兄弟节点，设置按钮显示和隐藏。

demo链接：http://1.xmpros.sinaapp.com/target.html

不使用JS，使用CSS3 target 以及 动画效果实现，点击一下弹出，并且保持弹出状态，然后再点击一下弹回的导航栏（或者可以叫做按钮）

不使用JS，使用CSS3 target 以及动画效果实现，点击一下弹出，并且保持弹出状态，然后再点击一下弹回的导航栏（或者可以叫做按钮）