在名為readmore的鏈接href上，如何使用css和js正確添加readmore功能？

相關的 HTML：

   <div id="main">
                
                <h2>Welcome!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo posuere massa ut pharetra. Donec a quam ac elit eleifend fringilla sit amet in enim. Maecenas at nibh id ante cursus sodales. Duis eget feugiat velit. Sed nec posuere risus, at vulputate lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin eget accumsan felis, rutrum sagittis massa. maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria</p>
                <p class="event"><a href="#">Read more >></a></p>
        
        </div>

CSS：

 #main {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto', sans-serif;
  color: rgb(224, 224, 224);
 }
 p {
  text-align: left;
  column-count: 2;
  max-height: 100px;
  overflow: hidden;
 } 
 main.open{
  max-height: 1000px;

JS：

var content = document.getElementById("main");
var event1 = document.getElementById("event");

event1.onclick = function(){

if(content.className == "open"){
    content.className == "";
    event1.innerHTML == "Read More";
} else {
    content.className == "open";
    event1.innerHTML == "Show Less";
}

};

uj5u.com熱心網友回復：

我在正確的位置添加了s并id更正了一些錯誤，例如==代替=更改innerText...classListclassName.contains().add().remove()

看一看 ;）

var content = document.getElementById("content");
var event1 = document.getElementById("event1");

event1.onclick = function(){

  if(content.classList.contains("open")){
    content.classList.remove("open");
    event1.innerText = "Read more >>";
  } else {
    content.classList.add("open");
    event1.innerText = "Show less <<";
  }
};

#main {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Roboto', sans-serif;
  color: rgb(224, 224, 224);
}
p {
  text-align: left;
  column-count: 2;
  max-height: 100px;
  overflow: hidden;
} 
.open{
  overflow: unset;
  max-height: unset;
}

<div id="main">
            
  <h2>Welcome!</h2>
  <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Aliquam commodo posuere massa ut pharetra. Donec a quam ac elit eleifend fringilla sit amet in enim. Maecenas at nibh id ante cursus sodales. Duis eget feugiat velit. Sed nec posuere risus, at vulputate lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin eget accumsan felis, rutrum sagittis massa. maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria</p>
  <p><a id="event1" href="#">Read more >></a></p>
    
</div>

標籤：

上一篇：僅顯示兩個框時，LI之間的空間很大-為什么？

下一篇：如何修復SVG文本影片中丟失的像素？