使用纯CSS实现内容的显示隐藏（可用于响应式手机端菜单栏的显示）

思路来自B站表严肃

感谢表老师

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS实现点击显示隐藏</title>
</head>
<style>
    /* 在手机端正常的操作是默认隐藏，点击菜单的时候显示 */
    div {
        display: none;
    }

    /* 当单选框被选中的时候显示兄弟元素div */
    #btn:checked~div {
        display: block;
    }

    /* 设置单选框为隐藏 */
    #btn {
        display: none;
    }
</style>

<body>
    <!-- 使用labe把按钮和单选框绑定到一起 -->
    <label for="btn">菜单</label>
    <input id="btn" type="checkbox">
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
</body>

</html>

仅是自己学习用途

版权声明：本文为qq_44822110原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。