jquery实现有默认内容的展开收起效果

tsai — Sat, 11 Sep 2010 09:34:55 +0000

前些天在实现一个网站的需求：1、展示一个分类里边的条目；2、默认显示前十条，并显示一个展开按钮，点击展开按钮，点击后下拉显示该分类下所有条目；3、展开后，按钮变为收起按钮，点击收起恢复为默认显示条目。

试图想用jquery的slideToggle()、animate()函数实现，发现行不通，处理不了剩余内容的展开收起。后来想到通过联系展开按钮的class与主题内容的id匹配，在按钮的click事件里通过修改css和jquery的animate()函数结合实现想要的效果，代码如下(这边显示一段文字，默认显示文字前面的一部分内容)：

jquery部分：

$(".more-btn").click(function(){
			 if($("#"+this.parentNode.className).css("height")=="100px"){
			  	$("#"+this.parentNode.className).css("height","auto");
			  	this.value="收起";
			  }
			 else{
			 	$("#"+this.parentNode.className).animate({height:"100px"},"slow");
			 	this.value="展开";
			 	}
		  });

css部分：

body {
			margin:0;
			padding:40px 40px;
			background:#fff;
			font:Arial, Helvetica, sans-serif;
			font-size:13px;
			line-height:180%;
		}
		.case{
			width:240px;
		}
		.entry{
			clear: both;
			line-height: 1.6em;
			width:223px;
			height:100px;
			overflow:hidden;
			line-height:18px;
			border-top:#ff9933 1px solid;
			border-left:#ff9933 1px solid;
			border-right:#ff9933 1px solid;
			padding-left:5px;
		}
		.more-btn{
			padding:0;
			width:230px;
			border-left:#ff9933 1px solid;
			border-right:#ff9933 1px solid;
			height:27px;
			background:#f4dc92;
			font-size:14px;
			font-weight:bolder;
			color:#000;
		}

html代码：





demo


	    	
		
	      	显示的内容在此。。。

demo：猛击此查看demo

原创wordpress主题BlueShowyo发布

tsai — Sun, 30 May 2010 15:56:51 +0000

终于实现了对自己的承诺，发布了第一个wordpress主题，将就把它叫做BlueShowyo,因为清一色蓝色调，晾出来勉励一下自己（配色方面还是要多学习了，争取做出像样点的主题），让自己能够一直学习下去，保持对设计方面的兴趣。整个主题的效果也就是我现在用的主题那样，个人觉得比较简单（但不清新），欢迎有兴趣试用的朋友批评，下载地址如下：

猛击此下载BlueShowyo Theme

github地址:Fork from github

发现问题请留言提出，谢谢。

话不多说，主题截图如下：

想预览大图请猛击以上图片。

查看Theme演示:Demo

风牛菜籽 » 设计

jquery实现有默认内容的展开收起效果

原创wordpress主题BlueShowyo发布