时间戳

首页 > 解决方案 > 如何在 jQuery 中上下滑动多余的文本？

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

问题描述

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

<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>

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

标签： javascriptjqueryhtmlcsstwitter-bootstrap

解决方案

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

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

推荐阅读