我如何 select 所有 p 標簽並在單擊復選框時使它們可見？

Question

我希望在選中復選框時顯示所有<p>元素，否則不顯示。

 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

在您的情況下，您需要添加到 CSS，它應該可以工作。

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

您可以在jsfiddle中看到的結果

Answer 2

您可以使用document.querySelectorAll()到 select 每個 p 元素，然后使用element.style.display來更改它是否可見。

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

請注意，您可以在document.querySelectorAll()中使用任何選擇器，包括類、屬性、ID 等。

片段：

 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

從JS 更改所有 'p' 顏色：

使所有段落display: none ，然后在 function 中使用 JS 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

如果你想讓它盡可能簡單，你可以動態改變元素的可見性屬性。 在這種情況下，我個人也不會以 p>tags 為目標，而是以整個列表項為目標，這樣您就不會呈現不必要的 DOM 元素（即，如果什么都不顯示，則沒有必要使用 a 標簽和列表項在里面）。 所以我會在 a 標簽中添加一個標識符並切換元素的可見性屬性：

為每個列表項添加一個 class：

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

修改 onChange function 以切換可見性：

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

從 css 中刪除：

nav p{
  display: none;
}

將此添加到 css：

.navbar-item {
  visibility: 'hidden'
}

Answer 5

您應該嘗試使用onclick擺脫inline事件處理程序並使用外部事件偵聽器 - 盡可能保持 HTML 干凈。 使用querySelector到 select 特定節點和querySelectorAll到 select 一個節點列表 - 如果需要可以很容易地使用Array.from(nodelist)將其轉換為數組 - 然后可以訪問各種數組方法。 在這種情況下，雖然這不是必需的 - forEach在節點列表上工作，因此處理每個p元素變得簡單。

 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>