javascript - 让类(class)单独工作

Question

我有两个段落，我希望能够在按下“更多信息”按钮时显示更多详细信息。该代码似乎运行良好。但是，当您单击“更多信息”时，顶部和底部段落都会折叠。我希望能够让它们单独折叠。

我怎样才能做到这一点？

function infobtn() {
  var s = document.getElementsByClassName("info");
  
  for (var i = 0; i < s.length; i++) {
    if (s[i].style.display === "block") {
      s[i].style.display = "none";
    }
    else {
      s[i].style.display = "block";
    }
  }
}

#paragraph {
  float: left;
  width: 50%;
  height: auto;
  margin: 5% 20% 5% 0%;
  padding: 0% 0% 0% 0%;
}

#paragraph p {
  background: rgba(200, 200, 200, 0.5);
  width: 98%;
  height: auto;
  color: black;
  padding: 1% 1% 1% 1%;
  float: left;
  overflow: hidden;
  margin: 0% 1% 5% 0%;
  text-align: center;
}

#paragraph .info {
  width: 100%;
  height: auto;
  display: none;
  float: left;
  overflow: hidden;
  transition: 0.5s ease-in-out;
  background: rgba(255, 255, 255, 1);
  border-radius: 0px 0px 10px 10px;
}

#paragraph h4 {
  color: white;
  background: rgba(50, 50, 50, 1);
  width: 100%;
  height: auto;
  text-align: center;
  padding: 1% 0% 1% 0%;
  margin: -4% 0% 0% 0%;
  float: left;
  border-radius: 5px;
}

#paragraph2 {
  float: left;
  width: 50%;
  height: auto;
  margin: 0% 0% 0% 0%;
  padding: 0% 0% 0% 0%;
}

#paragraph2 p {
  background: rgba(200, 200, 255, 0.5);
  width: 99%;
  height: auto;
  color: black;
  padding: 1% 1% 1% 1%;
  float: left;
  overflow: hidden;
  margin: 0% 1% 5% 0%;
  text-align: center;
}

#paragraph2 .info {
  width: 100%;
  height: auto;
  display: none;
  float: left;
  overflow: hidden;
  transition: 0.5s ease-in-out;
  background: rgba(255, 255, 255, 1);
  border-radius: 0px 0px 10px 10px;
}

#paragraph2 h4 {
  color: white;
  background: rgba(50, 50, 50, 1);
  width: 100%;
  height: auto;
  text-align: center;
  padding: 1% 0% 1% 0%;
  margin: -4% 0% 0% 0%;
  float: left;
  border-radius: 5px;
}

<div id="paragraph">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et,
    tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id
    non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus.
    Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p>
  <h4 onclick="infobtn()"> More info</h4>
  <div class="info">
    <h1> More info...</h1>
  </div>
</div>
<div id="paragraph2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et,
    tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id
    non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus.
    Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p>
  <h4 onclick="infobtn()"> More info</h4>
  <div class="info">
    <h1> More info...</h1>
  </div>
</div>

Answer 1

更有效的解决方案是使用更多的 CSS 而不是 JS

单击按钮切换类并使用 CSS 兄弟选择器显示/隐藏信息 block :

function showMore(el){
  el.classList.toggle('on');
}

.more-content {
  display: none;
}

.more.on ~ .more-content {
  display: block;
}

<div id="paragraph1">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <button class="more" onclick="showMore(this)">more</button>
  <p class="more-content">inventore fugiat aliquid non. Accusantium saepe suscipit, pariatur reprehenderit odio autem velit? Qui voluptate molestias cupiditate totam dolorum architecto inventore! Ad ullam et facilis excepturi</p>
</div>

<div id="paragraph2">
  <p>Qui voluptate molestias cupiditate totam</p>
  <button class="more" onclick="showMore(this)">more</button>
  <p class="more-content">voluptates dolorum placeat eius molestias asperiores iure, sequi laudantium corporis iusto obcaecati perferendis doloribus dolorem odio. Minima, incidunt magnam expedita ratione cumque autem?</p>
</div>