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

站长手记作者： 2024-08-28 02:10:01

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况，最常见的方法当然还是前端框架直接调用，省心省力，不易出错；当然还有使用纯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>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_69874.html

相关资讯： CSS div菜单列表元素切换