如何切换读取更多功能的可见性版本？

Question

我正在尝试切换（隐藏和显示）读取更多功能的版本。 现在我只能显示文本的其余部分，而不是隐藏它。

有什么建议吗？

$(document).ready(function(){
    var toggleReadMore = function() {
        $('#read-more').click(function(e) {
            var prev = $(this).prev();
            $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
            $(this).hide();
            $('#read-less').show();
        });
    };
    toggleReadMore();
}());

#p {
  height: 50px;
  overflow: hidden;
}
#read-less {
 display: none;
}
#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,255,255,1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -20px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
  <div id='read-more'>
    READ MORE
  </div>
   <div id='read-less'>
    READ LESS
  </div> 
</div>

Answer 1

将您的功能更新为：

$(document).ready(function() {
  $('#read-more').click(function(e) {
    $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
    $(this).hide();
    $(this).next('#read-less').show();
  });
  $('#read-less').click(function(e) {
    $(this).prev().prev().css('height', '50px');
    $(this).hide();
    $(this).prev('#read-more').show();
  });
});

您应该使用最新版本的jQuery，即3.2.1而不是2.1.1

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#read-more').click(function(e) {
    $(this).prev().css('height', $(this).prev()[0].scrollHeight + 'px');
    $(this).hide();
    $(this).next('#read-less').show();
  });
  $('#read-less').click(function(e) {
    $(this).prev().prev().css('height', '50px');
    $(this).hide();
    $(this).prev('#read-more').show();
  });
});

＆＃13;

#p {
  height: 50px;
  overflow: hidden;
}

#read-less {
  display: none;
}

#read-more,
#read-less {
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 255, 255, 1));
  color: blue;
  cursor: pointer;
  position: absolute;
  bottom: -40px;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}

#wrapper {
  position: relative;
  width: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='wrapper'>
  <p id='p'>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua
    put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </p>
  <div id='read-more'>
    READ MORE
  </div>
  <div id='read-less'>
    SHOW LESS
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;