想要在 3 個標簽之后隱藏所有標簽並與所有其他標簽一起工作，就像我再使用一次 HTML 代碼它與第一個和第二個一起工作

Question

任何評論或回答都會有幫助

問題

您可以從代碼中看到，它可以在單擊給定 html 代碼的按鈕時隱藏，但問題是：

• 想要在開始時隱藏列表，然后在進一步點擊時顯示/隱藏
• 如果HTML代碼被寫入2 次或更多次然后單擊第二個代碼按鈕顯示更多 2它只會更改第一個但我希望它單獨發生而不編寫Java 腳本代碼每次都不同並且再次
• 錯誤：您必須第一次雙擊“顯示更多”按鈕才能顯示 li 標簽，然后它才能正常工作----由 tacoshy 刪除

HTML
如果我寫 html 2 次，那么 java 腳本將以不同的方式應用於它們。
這將非常有幫助

<ul class="deviceNameCardData" id="deviceNameCardData">
  <li>Windows 11</li>
  <li>8GB Ram</li>
  <li>1TB SSD</li>
  <li>Intel Core i7 (11th Gen)</li>
  <li>NVIDIA GeForce GTX 1050</li>
  <li>15.6 inch Full HD Display</li>
  <li>Dolby Audio</li>
  <li>1 Year Onsite Warranty</li>
</ul>
<button id="demo" onclick="reed(this)">Show More</button>

當按鈕被點擊兩次時，它會顯示我想要的標簽，請點擊 1 次。
解決這個錯誤將非常有幫助

CSS

為了解決第一個問題，我使用了這個 CSS 代碼，但它產生了另一個問題，即項目符號從切換的列表項中消失

.deviceNameCardData.short > li:nth-child(n + 6) {
  display: block;
}
.deviceNameCardData > li:nth-child(n + 6) {
  display: none;
}

JavaScript

無論 html 代碼上面有 2 個還是 3 個，每次都想使用相同的下面代碼。
到目前為止，我只能使用 1 次代碼。
這將非常有幫助

function reed() {
  var ul = document.getElementById("deviceNameCardData");
  button = document.getElementById("demo");
  ul.classList.toggle("short");
  if (button.innerHTML == "Show More") {
    button.innerHTML = "Show Less";
  } else {
    button.innerHTML = "Show More";
  }
}

代碼片段：

 function reed() { var ul = document.getElementById("deviceNameCardData") button = document.getElementById("demo") ul.classList.toggle("short") if (button.innerHTML == 'Show More') { button.innerHTML = 'Show Less'; } else { button.innerHTML = 'Show More'; } }

 .deviceNameCardData.short>li:nth-child(n+6) { display: block; }.deviceNameCardData>li:nth-child(n+6) { display: none; }

 <ul class="deviceNameCardData" id="deviceNameCardData"> <li>Windows 11</li> <li> 8GB Ram</li> <li>1TB SSD</li> <li>Intel Core i7 (11th Gen)</li> <li>NVIDIA GeForce GTX 1050</li> <li>15.6 inch Full HD Display</li> <li> Dolby Audio</li> <li>1 Year Onsite Warranty</li> </ul> <button id="demo" onclick="reed(this)">Show More</button>

Answer 1

首先創建一個 class 隱藏所有列表項，但前 3 個列表項除外。 在我的代碼片段中使用了 class: short 。

您可以使用:nth-of-type(n+4)選擇器隱藏前 3 個例外的所有 lsit 項目。 這將從第 4 個項目開始的所有項目 select。

僅聲明display: none; 隱藏這些元素而不是將font-size更改為0 。

然后在按下按鈕時使用腳本在列表中添加/刪除 class：

 function reed() { var ul = document.querySelector('.deviceNameCardData'), button = document.querySelector('#demo'); // toggles the class of the ul ul.classList.toggle('short'); // toggles the button inner text if (button.innerHTML == 'Show More') { button.innerHTML = 'Show Less'; } else { button.innerHTML = 'Show More'; } }

 ul.short > li:nth-of-type(n+4) { display: none; }

 <ul class="deviceNameCardData short" id="deviceNameCardData"> <li>Windows 11</li> <li> 8GB Ram</li> <li>1TB SSD</li> <li>Intel Core i7 (11th Gen)</li> <li>NVIDIA GeForce GTX 1050</li> <li>15.6 inch Full HD Display</li> <li> Dolby Audio</li> <li>1 Year Onsite Warranty</li> </ul> <button id="demo" onclick="reed()">Show More</button>

使用這種方法，您還需要更強大的計算能力，因為您不必遍歷每個元素。 隱藏/顯示是通過 CSS 完成的，因此在第一次點擊時起作用，而不僅僅是第二次。