点击展开再次点击隐藏文字（适合pc）-阿里云开发者社区

点击展开再次点击隐藏文字（适合pc）

2023-09-15 48

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 点击展开再次点击隐藏文字（适合pc）

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本段落展开和折叠效果</title>
<style>
html,body,div,h2,p{margin: 0;padding: 0;}
html{font: 1em Arial, Helvetica, sans-serif;color: #444;}
a{color: #0087f1;}
p{margin-bottom: 5px;}
.container{margin: 0 auto;width: 600px;}
.wrap{position: relative;padding: 10px;overflow: hidden;}
.gradient{width: 100%;height: 35px;background: url() repeat-x;position: absolute;bottom: 0;left: 0;}
.read-more{padding: 5px;background: #fff;color: #333;position: relative;}
.read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;position: absolute;}
.read-more a: hover{color: #000;}
.triangle-down-hovertree {
    width: 0.675rem;
    height: 0.375rem;
    background: url(bot.png) center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0px;
    left: 0px;
    margin: 0px auto;
    top: 0.6rem;
}
.triangle-up-hovertree {
    width: 0.675rem;
    height: 0.375rem;
    background: url(top.png) center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0px;
    left: 0px;
    margin: 0px auto;
    top: 0.6rem;
}
.hewenqiToggle {
    height: 5rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background: url(op_bg.png);
    background-size: 100% 100%;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
    var slideHeight = 75; // px
    var defHeight = $('.wrap').height();
    if(defHeight >= slideHeight){
        $('.wrap').css('height' , slideHeight + 'px');
        $('.read-more').append('<a href="#">点击查看更多。。</a>');
        $('.read-more a').click(function(){
        var curHeight = $('.wrap').height();
        if(curHeight == slideHeight){
            $('.wrap').animate({
            height: defHeight
            }, "normal");
            $('.read-more a').html('点击隐藏');
            $('.gradient').fadeOut();
            $('.read-more span').addClass("triangle-down-hovertree");
            $('.read-more span').removeClass("triangle-up-hovertree");
            $('.hewenqiToggle').css("height","1.2rem");
        }else{
            $('.wrap').animate({
            height: slideHeight
            }, "normal");
            $('.read-more a').html('点击查看更多。。');
            $('.gradient').fadeIn();
            $('.read-more span').removeClass("triangle-down-hovertree");
            $('.read-more span').addClass("triangle-up-hovertree");
            $('.hewenqiToggle').css("height","5rem");
        }
        return false;
        });  
    }
});
</script>
</head>
<body>
    <div class="container">
        <div class="wrap">
            <div>
                我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
            </div>
          <div class="gradient"></div>
        </div>
        <div class="read-more">
            <div class="hewenqiToggle"></div>
            <span class="triangle-down-hovertree"></span>
        </div>
    </div>
</body>
</html>

点击展开再次点击隐藏文字（适合pc）

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

点击展开再次点击隐藏文字（适合pc）

热门文章

最新文章

相关电子书