欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

纯CSS实现点击事件展现隐藏div菜单列表/元素切换-知了汇智

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

  在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:

  实现原理利用CSS伪类:target

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS实现点击事件展现隐藏div菜单列表</title>
    <style>
        /*样式预设,可根据自身情况设定增删*/
        .l-btn{
            position: relative;
            width: 1.875rem;
            height: 1.875rem;
        }
        .l-btn>a:first-child,.l-btn>a:first-child+a{
            width: 1.875rem;
            height: 1.875rem;
            line-height: 1.875rem;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
        }
        .l-btn>a:first-child+a+*{
            position: absolute;
            width: 20rem;
            display: none;
        /*这个样式可以设置透明度、高度等进行变换,配合CSS3过渡,达到更美观的效果,这里仅做功能*/
        }
        
        /*单独*/
        .l-btn>a:first-child{
            display: block;
        }
        .l-btn>a:first-child+a{
            display: none;
        }
        /*-----为了方便理解,这里单独拿出来写,实际应用时可进行CSS分组合并----*/
        .l-btn>a:first-child:target{
            display: none;
        }
        .l-btn>a:first-child:target+a{
            display: block;
        }
        .l-btn>a:first-child:target+a+*{
            display: block;/*这里需要与上面设置的属性匹配*/
        }
    </style>
</head>

<body>
    <div class="l-btn">
        <a href="#l-btn-a" id="l-btn-a">三</a>
        <a href="#l-btn-b" id="l-btn-b">X</a>
        <div>我是菜单列表</div>
    </div>
</body>
</html>


      可以配合CSS3过渡做出很多不同的效果,具体不做详细演示

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

 

  效果没有JS那么完美,毕竟地址栏会出现你的锚点信息,当然这是比较小的瑕疵,好处应该是轻量吧。。

  另外使用:first-child(CSS2)作为选择器仅为了兼容更低版本的IE

       版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习web前端开发时使用

132 2811 3191
预约免费试学
点击咨询
预约试学