如何在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中添加文本：

ref

    $(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; }