点击复选框时如何选中所有p标签并将其设置为可见状态

问题根源 #

你现有代码里的CSS选择器nav input:checked + nav p存在逻辑错误：

• +是相邻兄弟选择器，只会匹配和当前元素紧挨着的同级元素
• 你的<input>是<nav>的直接子元素，它的相邻同级元素是<ul>，不存在另一个<nav>和它相邻，因此这个选择器永远无法命中你要控制的<p>元素

修复方案 #

提供两种可选方案，选其一即可：

方案1：纯CSS修改（无需改动JS和HTML）

直接把CSS里最后一行错误的选择器替换为：

nav input:checked ~ ul p {
    display: flex;
}

这里用~通用兄弟选择器，匹配复选框后面所有同级<ul>里的<p>元素，完全符合你的DOM结构。

方案2：配合现有JS逻辑修改

也可以通过JS给导航栏加状态类来控制，适配性更强：

1. 修改JS的change函数：

function change(){
    var nav = document.getElementById("navbar");
    var checkBox = document.getElementById("checkbox");

    if(checkBox.checked == true){
        nav.style.width = "300px";
        nav.classList.add('checked');
    } else{
        nav.style.width = "70px";
        nav.classList.remove('checked');
    }
}

2. 替换CSS最后一行为：

nav.checked p {
    display: flex;
}

完整修改后可运行代码参考 #

CSS

nav{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100px;
    height: 100%;
    transition: 0.3s;
    /* #63. change 2nd to -10px from -6px */
    box-shadow: rgba(136, 165, 191, 0.26) 4px 2px 10px 0px, rgba(255, 255, 255, 0.8) -4px -2px 16px 0px;
}

nav a{
    text-decoration: none;
}

nav li{
    list-style-type: none;
    display: flex;
    color:black;
}

nav p{
    display: none;
}

nav input{
    margin: 10px;
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 0;
    cursor: pointer;
}

/* 修改后的选择器 */
nav input:checked ~ ul p{
    display: flex;
}

JS

function change(){
    var nav = document.getElementById("navbar");
    var checkBox = document.getElementById("checkbox");

    if(checkBox.checked == true){
        nav.style.width = "300px";
    } else{
        nav.style.width = "70px";
    }
}

HTML

<nav id="navbar">
    <input onclick="change()" type="checkbox" name="" id="checkbox">
    
    <ul>
        <a href="#">
            <li>
                <p>Home</p>
            </li>
        </a>
        <a href="#">
            <li>
                <p>Summer</p>
            </li>
        </a>
    </ul>
</nav>

内容的提问来源于stack exchange，提问作者Leena