我如何 select 所有 p 标签并在单击复选框时使它们可见？

Question

I want all the <p> elements to be displayed when the checkbox is checked and otherwise not displayed.

 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"; } }

 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 + nav p{ display: flex; }

 <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>

Answer 1

In your case you need to add to CSS and it should work.

nav input:checked + ul p {
  display: block;
}

Result you can see in jsfiddle

Answer 2

You can use document.querySelectorAll() to select each p element and then use element.style.display to change whether or not it is visible.

let on = checkbox.checked;
document.querySelectorAll("p").forEach(e => {
  e.style.display = on ? "block" : "none";
});

Note that you can use any selector inside document.querySelectorAll() , including classes, attributes, IDs, etc.

Snippet:

 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"; } let on = checkbox.checked; document.querySelectorAll("p").forEach(e => { e.style.display = on? "block": "none"; }); }

 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 + nav p{ display: flex; }

 <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>

Answer 3

From JS change all 'p' color :

Make all paragraphs display: none and then with JS in your function change(): document.querySelectorAll('p').forEach(e => e.style.display = 'block');

 function change(){ var nav = document.getElementById("navbar"); var checkBox = document.getElementById("checkbox"); if(checkBox.checked == true){ nav.style.width = "300px"; document.querySelectorAll('p').forEach(e => e.style.display = 'block'); } else{ nav.style.width = "70px"; document.querySelectorAll('p').forEach(e => e.style.display = 'none'); } }

 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 + nav p{ display: flex; }

 <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>

Answer 4

If you want to keep it as simple as possible, you can dynamically change the visibility property of the element. I would also personally not target the p>tags in this case but rather the whole list item, so that you don't render uneccessary DOM elements (ie there is no point in having an a tag and a list item if nothing will be displayed in it). So I would add an identifier to the a tag and toggle the visibility prop of the element:

Add a class to each list item:

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

Modify the onChange function to toggle the visibility:

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

  var navbarItems = document.getElementByClassname("navbar-item");

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

Remove this from the css:

nav p{
  display: none;
}

Add this to the css:

.navbar-item {
  visibility: 'hidden'
}

Answer 5

You should try to move away from inline event handlers using onclick and use an external event listener - keep the HTML as clean as possible. Use querySelector to select specific nodes and querySelectorAll to select a nodelist - which can be converted to an array if required quite easily using Array.from(nodelist) - which then gives access to various array methods. In this case though that is not required - forEach works on a nodelist so processing each p element becomes simple.

 document.querySelector('nav#navbar input[type="checkbox"]').addEventListener('click',function(e){ let col=this.parentNode.querySelectorAll('p'); col.forEach(p=>p.style.display=this.checked? 'block': 'none') this.parentNode.style.width=this.checked? '300px': '70px'; })

 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 + nav p{ display: flex; }

 <nav id="navbar"> <input type="checkbox" value=1 /> <ul> <a href="#"> <li> <p>Home</p> </li> </a> <a href="#"> <li> <p>Summer</p> </li> </a> </ul> </nav>