jquery点击效果-jquery实现点击查看更多内容控制段落文字展开折叠效果_jquery

bendan520 jquery

2023-09-01 0 5,565 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

本文介绍jquery实现点击查看更多内容控制段落文本的展开和折叠的效果。分享给大家，供大家参考。详情如下：

这里使用jQuery来实现文本展开和折叠的效果。点击文字后jquery点击效果，文字内容会完整显示jquery点击效果，并控制段落显示文字。当不需要时，可以再次点击将内容折叠起来，即隐藏部分内容。。点击查看更多功能，很多大型网站都会用到。例如，一些视频介绍和产品介绍有时出于页面布局的考虑而默认隐藏。用户想查看时可以单击展开。。

运行效果如右图所示：

具体代码如下：



jQuery文本段落展开和折叠效果

html,body,p,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;}
#container h2{font-size: 20px;color: #0087f1;}
#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;border-top: 4px double #ddd;background: #fff;color: #333;}
#read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;}
#read-more a: hover{color: #000;}



$(function(){
 var slideHeight = 75; // px
 var defHeight = $('#wrap').height();
 if(defHeight >= slideHeight){
  $('#wrap').css('height' , slideHeight + 'px');
  $('#read-more').append('点击查看更多。。');
  $('#read-more a').click(function(){
   var curHeight = $('#wrap').height();
   if(curHeight == slideHeight){
    $('#wrap').animate({
     height: defHeight
    }, "normal");
    $('#read-more a').html('点击隐藏');
    $('#gradient').fadeOut();
   }else{
    $('#wrap').animate({
     height: slideHeight
    }, "normal");
    $('#read-more a').html('点击查看更多。。');
    $('#gradient').fadeIn();
   }
   return false;
  });  
 }
});



 
  
jQuery 控制段落文字展开折叠，点击查看更多的功能
  About Billabong
  
   

    
Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.
    Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.