本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

557

纯 html+css 实现点击元素隐藏操作功能

编程技术 | WangTwoThree | 2021-03-02 | 等你评论 | 1 次点赞

利用 label 的 for 属性绑定 checkbox,此方法对按钮与盒子的层级关系没有限制(需用到 CSS3 选择器)

<style>
ul,li{
            list-style: none;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .nav-con{
            display: none;
        }
        .nav-box{
            display: none;
        }
        .nav-con:checked ~ .nav-box{
           display: block;
        }
        .nav-btn{
            padding: 10px 15px;
            background:;
        }
</style>
<label for="control" class="nav-btn">菜单</label>
    <div>
        <input type="checkbox" name="" id="control" class="nav-con">
        <ul class="nav-box">
            <li><a href="#">首页</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">新闻</a></li>
        </ul>
    </div>

猜你喜欢

暂无评论

有话要说

本页二维码

扫码手机打开

浏览TOP5
热门标签
点赞TOP5
最新评论
别人在看