Javascript 单击后显示隐藏的第n个子项

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

我知道如何在单击时隐藏和显示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"
  }
}

但不确定如何处理通过第n个子项隐藏的同一类中的项目

标记：

@媒体最大宽度：576px{ .wrapper:n+4类型的第n个{ 显示：无； } } .showmore{ 显示：无； } @媒体最大宽度：576px{ .showmore{ 显示：块； } } 测试1

测试2

测试3

测试4

测试5

测试6

显示更多 当容器上不存在.show all类时，使用：not伪类仅隐藏项：

const container=document.querySelector'.container' const showmore=document.querySelector'.showmore' showmore.addEventListener'click'，=> container.classList.toggle'show-all' .showmore{ 显示：无； } @媒体最大宽度：576px{ .container:not.show-all.wrapper:n类型n+4的第n个{ 显示：无； } .showmore{ 显示：块； } } 测试1

测试2

测试3

测试4

测试5

测试6

显示更多

---

我首先要更改标记中ShowMore链接的位置，以便保持更一致的阅读顺序

使用这种方法，您需要隐藏链接的所有同级元素，单击事件只会删除链接本身，显示所有剩余内容

在这个例子中，链接在640px下是可见的，打开整个页面中的演示，我还插入了一个小的淡入淡出效果，在链接之前，如果你不感兴趣，只需删除线性渐变

document.querySelector.showmore.addEventListener'click'，functionev{ 防止违约； 这个。删除； } .showmore{ 显示：无； 边缘顶部：-5em； } .showmore：：之前{ 内容：； 显示：块； 身高：5公分； 背景：线性渐变至底部，透明，fff； } @介质全部和最大宽度：640px{ .showmore{ 显示：块； 位置：相对位置； } .showmore~*{display:none；} } 同一天，我们将继续为精英们服务

同一天，我们将继续为精英们服务

同一天，我们将继续为精英们服务

同一天，我们将继续为精英们服务

同一天，我们将继续为精英们服务

同一天，我们将继续为精英们服务

---

将父级高度限制为某些像素值如何？例如：页面加载时为150px，单击“显示更多”按钮后，将父级高度更改为“自动”？