如何在jQuery中上下滑动多余的文本？

Question

文本多行时如何上下滑动？

<div class="col-md-4">
<p class="h1 text-center">
    My Title
</p>
<p class="text-justify">
    my text my text my text my text my text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
    my text my textmy text my textmy text my textmy text my text
</p>
<p align="center">
    <a href="#"><img class="img-responsive" width="150" height="150" src="assets/images/products/readmorebtn.png" />
    </a>
</p>

当有很多行时，如何隐藏一半的内容，并创建一个“阅​​读更多”按钮，单击该按钮即可显示全部隐藏的内容，并具有一个滑块？

Answer 1

这是执行此操作的正确方法：

  $(function(){ $("#moreText").on("click",function(){ $("#toggleP").toggleClass("show"); }); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .show{display: inline !important;} </style> <div class="col-md-4"> <p class="h1 text-center"> My Title </p> <p class="text-justify"> <span> my text my text my text my text my text my text </span> <span id="toggleP" style="display: none;"> my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text my text my textmy text my textmy text my textmy text my text </span> </p> <p align="center"> <a href="#" id="moreText">more text </a> </p> 

Answer 2

下面的代码可以帮助您实现，您必须在div中添加文本：

  $(document).ready(function() { $('#hidden-xs').html($('#hidden-xs').next().next().next('.hidden-xs').html()); $('#dvReadmore').click(function(){ $(this).hide(0); $('#hidden-xs').animate({height: '100%'}); $('#dvShowless').show(); }); $('#dvShowless').click(function(){ $(this).hide(0); $('#hidden-xs').animate({height: '3em'}); $('#dvReadmore').show(); }); }); 

 #hidden-xs { line-height: 1.5em; height: 3em; overflow: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="col-lg-12 clearfix"> <div id="hidden-xs"> TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data TEst data </div> <div class="readmorehxs" id="dvReadmore"><b>Read more..</b></div> <div class="readmorehxs" id="dvShowless" style="display:none;text-align:right;"><b>..Show less</b></div> </div>