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>

Answer 2

我将首先更改标记中“显示更多”链接的位置，以保持更一致的阅读顺序。

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

在此示例中，链接在640px下可见（在整个页面中打开演示），并且我还在链接之前的文本上插入了一个小的淡入淡出效果（如果您要删除线性渐变，不感兴趣）

document.querySelector('.showmore').addEventListener('click', function(ev) {
  ev.preventDefault();
  this.remove();
})

.showmore { 
  display: none;
  margin-top: -5em;
}

.showmore::before {
  content: "";
  display: block;
  height: 5em;
  background: linear-gradient(to bottom, transparent, #fff);
}



@media all and (max-width:640px) {
  .showmore { 
    display: block;
    position: relative;
  }  
  
  .showmore ~ * { display: none; }
}

<div class="container">

  <div class="wrapper">
    <p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
  </div>

  <div class="wrapper">
    <p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
  </div>

  <div class="wrapper">
    <p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
  </div>

  <div class="wrapper">
    <p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
  </div>
  
  <a class="showmore" href="#">Show more</a>

  <div class="wrapper">
    <p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
  </div>

  <div class="wrapper">
    <p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
  </div>

</div>

显示隐藏的第n个子项onclick

2 个答案: