【已解决】jquery实现文本内容缩略与全部显示

￡神魔★判官ぃ 2024-03-27 13:54 26阅读 0赞

今天在复习jquery动画的时候，老师在课堂上提出了内容缩略与内容全部显示。这里主要的实现核心是jquery代码控制css代码，css代码里最核心的就是display属性，jquery代码成功控制了它，让它受控显示，那么效果就出来了。

### 代码效果 ###

点击显示全部就显示全部  
![在这里插入图片描述][876bcd685c154a4fb45de39ecc3abb7e.png]  
点击精简就是精简版本  
![在这里插入图片描述][aa2761d011be49889ede174cc7e7ec30.png]

### css代码 ###

<style type="text/css">
    			* {
          
    				margin: 0;
    				padding: 0;
    			}
    			
    			body {
          
    				font-size: 12px;
    				text-align: center;
    			}
    			
    			a {
          
    				color:#04d;
    				text-decoration: none;
    			}
    			
    			a:hover {
          
    				color:#f50;
    				text-decoration: underline;
    			}
    			.SubCategoryBox{
          
    				width: 600px;
    				margin: 0 auto;
    				text-align: center;
    				margin-top: 40px;
    			}
    			
    			.SubCategoryBox ul {
          
    				list-style: none;
    			}
    			
    			.SubCategoryBox ul li {
          
    				display: block;
    				float: left;
    				width: 200px;
    				line-height: 20px;
    			}
    			
    			.showmore , .showless {
          
    				clear: both;
    				text-align: center;
    				padding-top: 10px;
    			}
    			
    			.showmore a, .showless a {
          
    				display: block;
    				width: 120px;
    				margin: 0 auto;
    				line-height: 24px;
    				border: 1px solid #AAA;
    				
    			}
    			.showmore a span {
          
    				padding-left: 15px;
    				
    			}
    			.promoted a {
          
    				color:#f50;
    			}
    			
    		</style>

### html代码 ###

<div class="SubCategoryBox">
    			<ul>
    				<li class="promoted"><a href="#”>佳能</a><i>(30440)</i></li>
    				<li><a href="#">索尼</a><i>(27220)</i></li>
    				<li class="promoted"><a href="#">三星</a><i>(20808)</i></li>
    				<li><a href="#">尼康</a><i>(17821) </i></li>
    				<li class="promoted"><a href="#">松下</a><i>(12289)</i></li>
    				<li><a href="#">卡西欧</a><i>(8242)</i></li>
    				<li><a href="#">富士</a><i>(14894)</i></li>
    				<li><a href="#">柯达</a><i>(9520)</i></li>
    				<li><a href="#">宾得</a><i>(2195)</i></li>
    				<li><a href="#"”>理光</a><i>(4114)</i></li>
    				<li><a href=“#">奥林巴斯</a><i>(12205)</i></li>
    				<li><a href="#">明基</a><i>(1466)</i></li>
    				<li><a href="#">爱国者</a><i>( 3091)</i></li>
    				<li><a href="#">其它品牌相机</a><i>(7275)</i></li>				
    
    		</ul>
    			<div class="showmore">
    				<a href="#"><span>显示全部品牌</span></a>
    			</div>
    		</div>

### js代码 ###

<script type="text/javascript" src="js/jquery.js"></script>
    		<script type="text/javascript">
    			$(function(){
          
    				$("div div a").click(function(){
          
    					$("li:gt(5):not(:last)").toggle();
    					if($("li:gt(5):not(:last)").is(":hidden")){
          
    						$("div div a span").text("显示全部品牌");
    						$("div div").removeClass();
    						$("div div").addClass("showmore");
    						
    						$("li:contains('明基')").removeClass("promoted");
    					}else{
          
    						$("div div a span").text("显示精简品牌");
    						$("div div").removeClass();
    						$("div div").addClass("showless");
    						$("li:contains('索尼')").addClass("promoted");
    					}
    					return false;
    				});
    			});
    		</script>

### 总结 ###

本博文实现的文本内容缩略与全部显示，核心之处就是js代码控制css中display属性，知道了这点，这个案例就懂了七八了。

[876bcd685c154a4fb45de39ecc3abb7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/aacfe67fcc59413c968f9b01587bd4e6.png
[aa2761d011be49889ede174cc7e7ec30.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/01bd80a089b64da9bb058368f70a8ab5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关【已解决】jquery实现文本内容缩略与全部显示

今天在复习jquery动画的时候，老师在课堂上提出了内容缩略与内容全部显示。这里主要的实现核心是jquery代码控制css代码，css代码里最核心的就是display属性，jq

￡神魔★判官ぃ/ 2024年03月27日 13:54/ 0 赞/ 27 阅读

相关期中实验：记事本实现时间戳、搜索、正文缩略显示

期中实验：记事本实现时间戳、搜索、正文缩略显示 1.时间戳的实现（1）在noteslist\_item.xml代码新增显示时间戳的组件。 <TextVie

本是古典何须时尚/ 2023年01月01日 08:55/ 0 赞/ 66 阅读

相关如何实现文本内容折叠并显示“...查看全部”？

![format_png][] 来源 | https://wintc.top/article/58 多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一

左手的ㄟ右手/ 2022年12月24日 11:53/ 0 赞/ 207 阅读

相关 JS实现默认显示部分文字点击按钮显示全部内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

矫情吗；*/ 2022年08月25日 08:08/ 0 赞/ 191 阅读

相关 java script 显示缩略词

1. 循序渐进：从最核心的内容开始，逐步添加额外的内容 2. display inline 把所有的元素放在一行显示，横向显示（以内联元素的形式显示） bloc

蔚落/ 2022年08月21日 00:08/ 0 赞/ 115 阅读

相关列表显示, 内容过长省略显示, 鼠标停留在内容上显示全部内容

<td id="com" title='{ {item.com}}' style="text-overflow: ellipsis; white-spac

男娘i/ 2022年04月17日 05:07/ 0 赞/ 294 阅读

相关 Java文单缩略内容截取

今天一个朋友问我如何截取文章内容中的指定长度内容,多余了就加省略号,于是随手写了方法,顺便拿出给需要的人参考下: http://www.blogjava.net

迈不过友情╰/ 2022年04月17日 02:20/ 0 赞/ 137 阅读

相关 jquery hover鼠标划过实现列表页文章内容部分显示隐藏及全部显示切换

![Center][] 测试代码 <div class="hn_column"> <li><h2><a href="/plus/view.php

Love The Way You Lie/ 2021年09月25日 17:30/ 0 赞/ 269 阅读

相关 Layer.js实现表格溢出内容省略号显示,悬停显示全部

Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=

向右看齐/ 2021年06月26日 16:06/ 0 赞/ 660 阅读

相关鼠标移上去显示全部内容

引入js文件 (function($){ $.fn.toolTip = function(options) { //Providing plugin ...

红太狼/ 2021年04月19日 14:36/ 0 赞/ 607 阅读