如何使用 CSS 和 jQuery 向下展开“阅读更多...”部分

Question

我目前在 html 中有一个段落标签，里面有长文本。我还有一个按钮，单击该按钮后应展开和缩回文本部分。使用它是因为文本太长，所以我添加了一个“阅读更多”按钮来展开并显示全文。现在我无法扩展该段落。相反，当单击该按钮时，它会淡入背景并且永远不会显示。

超文本标记语言

  <div class="infos">

    <p class="name">Mr Big</p>

    <br>

    <p class="job">Founder & Co-Owner</p>

    <p class="read-more"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>

  </div>

  <div class="button_container">

     <button class="btn2">

       <span>Read more...</span>

    </button>

</div>

CSS

.infos .read-more{

    font-size: 15px;

    font-weight: 500;

    color: rgb(230, 241, 255);

    font-style: italic;

    line-height: 1.5;

    position: relative;

    width: 100%;

    text-align: center;

    margin: 0 auto; padding: 15px 10px;

    overflow: hidden;

    max-height: 170px;

    /* "transparent" only works here because == rgba(0,0,0,0) */

    background-image: linear-gradient(to top, transparent, #434343);

}

.btn2 {

    border: none;

    display: block;

    text-align: center;

    cursor: pointer;

    text-transform: uppercase;

    outline: none;

    overflow: hidden;

    position: absolute;

    color: #fff;

    font-weight: 700;

    font-size: 10px;

    background-color: #59646c;

    padding: 10px 30px;

    margin: 0 auto;

    box-shadow: 0 5px 15px rgba(0,0,0,0.20);

    border-radius: 25px;

}

.btn2 span {

    position: relative;

    z-index: 1;

}

.button_container {

    position: relative;

    left: 0;

    right: 0;

    top: 30%;

}

.description, .link {

    text-align: center;

}

.btn2:after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    height: 490%;

    width: 140%;

    background: #78c7d2;

    -webkit-transition: all .5s ease-in-out;

    transition: all .5s ease-in-out;

    -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);

    transform: translateX(-98%) translateY(-25%) rotate(45deg);

}

.btn2:hover:after {

    -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);

    transform: translateX(-9%) translateY(-25%) rotate(45deg);

}

Answer 1

考虑以下代码示例。$(function() {  $(".btn2").click(function(e) {    var self = $(this);    var par = self.parent();    var target = par.prev(".infos").find(".read-more");    self.fadeOut("fast", function() {      target.animate({        height: target[0].scrollHeight      }, 600);    });  });});.infos .read-more {  font-size: 15px;  font-weight: 500;  color: rgb(230, 241, 255);  font-style: italic;  line-height: 1.5;  position: relative;  width: 100%;  text-align: center;  margin: 0 auto;  padding: 15px 10px;  overflow: hidden;  height: 170px;  /* "transparent" only works here because == rgba(0,0,0,0) */  background-image: linear-gradient(to top, transparent, #434343);  text-overflow: ellipsis;}.btn2 {  border: none;  display: block;  text-align: center;  cursor: pointer;  text-transform: uppercase;  outline: none;  overflow: hidden;  position: absolute;  color: #fff;  font-weight: 700;  font-size: 10px;  background-color: #59646c;  padding: 10px 30px;  margin: 0 auto;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);  border-radius: 25px;}.btn2 span {  position: relative;  z-index: 1;}.button_container {  position: relative;  left: 0;  right: 0;  top: 30%;}.description,.link {  text-align: center;}.btn2:after {  content: "";  position: absolute;  left: 0;  top: 0;  height: 490%;  width: 140%;  background: #78c7d2;  -webkit-transition: all .5s ease-in-out;  transition: all .5s ease-in-out;  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);  transform: translateX(-98%) translateY(-25%) rotate(45deg);}.btn2:hover:after {  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);  transform: translateX(-9%) translateY(-25%) rotate(45deg);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="infos">  <p class="name">Mr Big</p>  <br>  <p class="job">Founder & Co-Owner</p>  <div class="read-more">    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt eget nullam non nisi est sit amet facilisis. Vitae purus faucibus ornare suspendisse sed nisi lacus. Ornare arcu      odio ut sem nulla pharetra diam sit. Amet dictum sit amet justo donec enim diam vulputate. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Eget gravida cum sociis natoque penatibus. Aliquam sem et tortor consequat id porta nibh. Et      netus et malesuada fames ac. Velit aliquet sagittis id consectetur purus ut.</p>    <p>Arcu risus quis varius quam quisque. Faucibus purus in massa tempor nec. Sed vulputate mi sit amet mauris commodo quis. Lorem sed risus ultricies tristique. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et ligula ullamcorper malesuada      proin libero nunc. Facilisis gravida neque convallis a. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Amet est placerat in egestas. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Porta lorem mollis aliquam ut      porttitor leo a. Semper risus in hendrerit gravida rutrum quisque. Leo integer malesuada nunc vel risus commodo viverra maecenas. Arcu non odio euismod lacinia at quis risus sed vulputate. Donec et odio pellentesque diam volutpat commodo sed. Aliquam      malesuada bibendum arcu vitae elementum curabitur vitae. Ut etiam sit amet nisl purus in. Massa enim nec dui nunc mattis enim ut. Donec ac odio tempor orci.</p>    <p>Massa ultricies mi quis hendrerit dolor magna eget est. Augue interdum velit euismod in pellentesque massa placerat. Vel pharetra vel turpis nunc. Id faucibus nisl tincidunt eget nullam non. Id ornare arcu odio ut sem nulla. Tortor id aliquet lectus      proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque. Dapibus ultrices in iaculis nunc sed augue lacus. Quis ipsum suspendisse ultrices gravida dictum. Ornare aenean euismod elementum nisi quis. Rhoncus mattis rhoncus      urna neque viverra justo nec ultrices dui. Congue quisque egestas diam in arcu. Orci phasellus egestas tellus rutrum tellus. Nisl suscipit adipiscing bibendum est ultricies integer. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices.      Elit at imperdiet dui accumsan sit amet. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Faucibus in ornare quam viverra.</p>    <p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Non consectetur a erat nam at lectus urna duis. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Vel orci porta      non pulvinar neque laoreet. Et odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing enim eu turpis egestas pretium. Nulla pellentesque dignissim enim sit amet venenatis urna. Porta non pulvinar neque laoreet suspendisse. Quam      nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis ut diam quam nulla porttitor massa. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Fringilla urna porttitor rhoncus dolor purus non enim. Blandit turpis cursus      in hac habitasse. Sed blandit libero volutpat sed. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.</p>    <p>Sed risus pretium quam vulputate dignissim suspendisse in est ante. Urna cursus eget nunc scelerisque viverra mauris. Tincidunt eget nullam non nisi. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Nulla facilisi nullam      vehicula ipsum a arcu cursus. Risus nec feugiat in fermentum posuere. Lobortis feugiat vivamus at augue eget arcu. Eget est lorem ipsum dolor. Fames ac turpis egestas sed tempus urna. Phasellus vestibulum lorem sed risus ultricies tristique. Erat      nam at lectus urna duis convallis convallis tellus id. Non odio euismod lacinia at quis risus sed vulputate odio. Nisl nunc mi ipsum faucibus.</p>  </div></div><div class="button_container">  <button class="btn2">       <span>Read more...</span>    </button></div>您可以使用.animate()CSS 来动画更改。对于此脚本，最好将高度设置为符合整个文本的高度。即使我们没有溢出并且高度已经设置，元素的属性scrollHeight也为我们提供了等于框的完整高度的像素数。我使用回调选项来.fadeOut()确保淡入淡出动画在我们开始新动画以显示文本之前完成。$(function() {  $(".btn2").click(function(e) {    var self = $(this);    var par = self.parent();    var target = par.prev(".infos").find(".read-more");    if (self.data("action") == undefined) {      self.data({        action: "more",        height: target.css("height").slice(0,-2)      });    }    if (self.data("action") == "more") {      console.log("Expand to " + target[0].scrollHeight);      target.animate({        height: target[0].scrollHeight      }, 600);      self.text("Read Less...");      self.data("action", "less");    } else {      console.log("Shrink to " + self.data("height"));      target.animate({        height: self.data("height")      }, 600);      self.text("Read More...");      self.data("action", "more");    }  });});.infos .read-more {  font-size: 15px;  font-weight: 500;  color: rgb(230, 241, 255);  font-style: italic;  line-height: 1.5;  position: relative;  width: 100%;  text-align: center;  margin: 0 auto;  padding: 15px 10px;  overflow: hidden;  height: 170px;  /* "transparent" only works here because == rgba(0,0,0,0) */  background-image: linear-gradient(to top, transparent, #434343);  text-overflow: ellipsis;}.btn2 {  border: none;  display: block;  text-align: center;  cursor: pointer;  text-transform: uppercase;  outline: none;  overflow: hidden;  position: absolute;  color: #fff;  font-weight: 700;  font-size: 10px;  background-color: #59646c;  padding: 10px 30px;  margin: 0 auto;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);  border-radius: 25px;}.btn2 span {  position: relative;  z-index: 1;}.button_container {  position: relative;  left: 0;  right: 0;  top: 30%;}.description,.link {  text-align: center;}.btn2:after {  content: "";  position: absolute;  left: 0;  top: 0;  height: 490%;  width: 140%;  background: #78c7d2;  -webkit-transition: all .5s ease-in-out;  transition: all .5s ease-in-out;  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);  transform: translateX(-98%) translateY(-25%) rotate(45deg);}.btn2:hover:after {  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);  transform: translateX(-9%) translateY(-25%) rotate(45deg);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="infos">  <p class="name">Mr Big</p>  <br>  <p class="job">Founder & Co-Owner</p>  <div class="read-more">    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt eget nullam non nisi est sit amet facilisis. Vitae purus faucibus ornare suspendisse sed nisi lacus. Ornare arcu      odio ut sem nulla pharetra diam sit. Amet dictum sit amet justo donec enim diam vulputate. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Eget gravida cum sociis natoque penatibus. Aliquam sem et tortor consequat id porta nibh. Et      netus et malesuada fames ac. Velit aliquet sagittis id consectetur purus ut.</p>    <p>Arcu risus quis varius quam quisque. Faucibus purus in massa tempor nec. Sed vulputate mi sit amet mauris commodo quis. Lorem sed risus ultricies tristique. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et ligula ullamcorper malesuada      proin libero nunc. Facilisis gravida neque convallis a. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Amet est placerat in egestas. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Porta lorem mollis aliquam ut      porttitor leo a. Semper risus in hendrerit gravida rutrum quisque. Leo integer malesuada nunc vel risus commodo viverra maecenas. Arcu non odio euismod lacinia at quis risus sed vulputate. Donec et odio pellentesque diam volutpat commodo sed. Aliquam      malesuada bibendum arcu vitae elementum curabitur vitae. Ut etiam sit amet nisl purus in. Massa enim nec dui nunc mattis enim ut. Donec ac odio tempor orci.</p>    <p>Massa ultricies mi quis hendrerit dolor magna eget est. Augue interdum velit euismod in pellentesque massa placerat. Vel pharetra vel turpis nunc. Id faucibus nisl tincidunt eget nullam non. Id ornare arcu odio ut sem nulla. Tortor id aliquet lectus      proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque. Dapibus ultrices in iaculis nunc sed augue lacus. Quis ipsum suspendisse ultrices gravida dictum. Ornare aenean euismod elementum nisi quis. Rhoncus mattis rhoncus      urna neque viverra justo nec ultrices dui. Congue quisque egestas diam in arcu. Orci phasellus egestas tellus rutrum tellus. Nisl suscipit adipiscing bibendum est ultricies integer. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices.      Elit at imperdiet dui accumsan sit amet. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Faucibus in ornare quam viverra.</p>    <p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Non consectetur a erat nam at lectus urna duis. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Vel orci porta      non pulvinar neque laoreet. Et odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing enim eu turpis egestas pretium. Nulla pellentesque dignissim enim sit amet venenatis urna. Porta non pulvinar neque laoreet suspendisse. Quam      nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis ut diam quam nulla porttitor massa. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Fringilla urna porttitor rhoncus dolor purus non enim. Blandit turpis cursus      in hac habitasse. Sed blandit libero volutpat sed. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.</p>    <p>Sed risus pretium quam vulputate dignissim suspendisse in est ante. Urna cursus eget nunc scelerisque viverra mauris. Tincidunt eget nullam non nisi. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Nulla facilisi nullam      vehicula ipsum a arcu cursus. Risus nec feugiat in fermentum posuere. Lobortis feugiat vivamus at augue eget arcu. Eget est lorem ipsum dolor. Fames ac turpis egestas sed tempus urna. Phasellus vestibulum lorem sed risus ultricies tristique. Erat      nam at lectus urna duis convallis convallis tellus id. Non odio euismod lacinia at quis risus sed vulputate odio. Nisl nunc mi ipsum faucibus.</p>  </div></div><div class="button_container">  <button class="btn2">       <span>Read more...</span>    </button></div>