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

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

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

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>

Answer 2

一种解决方案是参数化您的infobtn函数。这样，您可以分别定位信息部分。这也意味着您需要使用不同的类名来区分这两个部分。

function infobtn(className){
  var s= document.getElementsByClassName(className);
  
  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('target-1')"> More info</h4>

<div class="info target-1"><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('target-2')"> More info</h4>

<div class="info target-2"><h1> More info...</h1>
</div>
</div>

Answer 3

因为您要内联js代码，所以建议添加事件和该关键字，例如：

<h4 onclick="infobtn(event, this)"> More info</h4>

要获得当前样式，您需要对getComputedStyle和previousElementSibling使用nextElementSibling，因为：

window.getComputedStyle（）方法返回一个对象，该对象报告应用active后，元素的所有CSS属性的值样式表并解析这些值可能会进行的任何基本计算包含。各个CSS属性值可通过API访问由对象提供或通过简单地使用CSS属性名称进行索引提供。

function infobtn(evt, ele){
    ele.previousElementSibling.style.display = (getComputedStyle(ele.previousElementSibling)['display'] === "block") ? 'none' : 'block';
    ele.nextElementSibling.style.display = (ele.previousElementSibling.style.display === "block") ? 'none' : '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(event, this)"> 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(event, this)"> More info</h4>

    <div class="info"><h1> More info...</h1>
    </div>
</div>

Answer 4

您可以设置点击处理程序以相对于被单击的特定元素来修改元素，而不是修改该类型的所有元素。您还可以从代码内生成这些点击处理程序，而无需将其作为属性嵌入HTML中。

下面的评论中有更详细的解释：

// Step through each of the h4 elements:
Array.from(document.getElementsByTagName('h4')).forEach(function(el) {
  // bind a click handler to this h4 element:
  el.onclick = function() {
    // find the element we want to show or hide, which follows the h4:
    var info = el.nextElementSibling;
    // toggle its display:
    info.style.display = (info.style.display === "block" ? "none" : "block")
  }
});

.info {
  display: none
}

<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.</p>
  <h4> 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</p>
  <h4> More info</h4>
  <div class="info">
    <h1> More info...</h1>
  </div>
</div>

使课程分别进行

4 个答案: