javascript - 显示隐藏的第 n 个子项 onclick

Question

我有一个内容列表，所有内容都可以在桌面上查看。在手机上，我隐藏了一些内容并想添加一个按钮，点击它会显示隐藏的内容。

我知道如何在点击时隐藏和显示 div，即。

function showClass(id) {
  var elem = document.getElementById(id);
  var visible = getComputedStyle(elem).display == "block";
  if (!visible) {
    elem.style.display = "block"
  } else {
    elem.style.display = "none"
  }
}

但不确定如何处理通过 nth-child 隐藏的同一类中的元素？

标记:

@media(max-width: 576px){
  .wrapper:nth-of-type(n+4) {
    display: none;
  }
}
.showmore{
  display: none;
}
@media(max-width: 576px){
  .showmore{
    display: block;
  }
}

<div class="container">

  <div class="wrapper">
    <p>test 1</p>
  </div>

  <div class="wrapper">
    <p>test 2</p>
  </div>

  <div class="wrapper">
    <p>test 3</p>
  </div>

  <div class="wrapper">
    <p>test 4</p>
  </div>

  <div class="wrapper">
    <p>test 5</p>
  </div>

  <div class="wrapper">
    <p>test 6</p>
  </div>

  <a class="showmore" onclick="show">Show more</a>

</div>

Answer 1

使用 :not() 伪类仅在容器上不存在 .show-all 类时隐藏元素:

const container = document.querySelector('.container')

const showmore = document.querySelector('.showmore')

showmore.addEventListener('click', () => 
  container.classList.toggle('show-all')
)

.showmore{
  display: none;
}

@media(max-width: 576px){
  .container:not(.show-all) .wrapper:nth-of-type(n+4) {
    display: none;
  }
  
  .showmore{
    display: block;
  }
}

<div class="container">

  <div class="wrapper">
    <p>test 1</p>
  </div>

  <div class="wrapper">
    <p>test 2</p>
  </div>

  <div class="wrapper">
    <p>test 3</p>
  </div>

  <div class="wrapper">
    <p>test 4</p>
  </div>

  <div class="wrapper">
    <p>test 5</p>
  </div>

  <div class="wrapper">
    <p>test 6</p>
  </div>

  <a class="showmore">Show more</a>

</div>