在名为read more 的link 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>

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

On a link href named read more, how do I add read more function properly with css and js?

html

javascript

css

onclick

target