在名为 read more 的链接 href 上，如何使用 css 和 js 正确添加 read more 功能？

Question

相关的 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";
}

};

Answer 1

我在正确的位置添加了ids，并更正了一些错误，例如== 而不是= 以更改innerText...使用classList 而不是className，这允许使用.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>