jq点击展示更多内容效果

效果:

常见的点击更多展示效果.代码如下,有几种方式.

样式:

                        .list-box {
				background: #ddd;
				width: 500px;
				margin: 20px auto;
			}

			.content {
				height: 48px;
				line-height: 24px;
				overflow: hidden;
			}

			.showMore {
				height: auto;
			}

			.more-btn {
				color: #ea5413;
				text-align: center;
				cursor: pointer;
				/* animation: all 0.2s; */
			}

			.more-btn i {
				display: inline-block;
				animation: all 0.2s;
				font-style: normal;
				transform: rotate(90deg);

			}

			.showMore+.more-btn i {
				transform: rotate(-90deg);
			}

html

<div class="list-box">
	<div class="content">
		折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。折叠内容主体，这是一段比较长内容。
		默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。
		折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。
	</div>
	<div class="more-btn">更多<i>></i></div>
</div>

js第一种方式:(普通的展开收起加类实现)

$(function() {
	$('.more-btn').click(function() {

		if ($(this).prev('.content').height() == '48') {
			$(this).prev('.content').addClass('showMore');
			
			$(this).html("收起<i>></i>");
		} else {
			$(this).prev('.content').removeClass('showMore');

			$(this).html("更多<i>></i>");
		}
	})
})

js第二种方式(效果是滑动展开收起,用的是动画animate)

$(function() {
	$('.more-btn').click(function() {

		if ($(this).prev('.content').height() == '48') {
			
			// $(this).prev('.content').animate({
			// 	height: "auto"
			// },1000)
			
			// jQuery.animate height设为auto没有效果的解决方法
			var curHeight = $('.content').height(),
				autoHeight = $('.content').css('height', 'auto').height();
			$(this).prev('.content').height(curHeight).animate({
				height: autoHeight
			}, 1000)
			$(this).html("收起<i>></i>");
		} else {
			
			$(this).prev('.content').animate({
				height: '48px'
			})

			$(this).html("更多<i>></i>");
		}
	})
})

本来一开始是展开之后的内容用height:auto,但是发现一直点击没有效果,百度才知道jQuery.animate height设为auto没有效果的,解决方法是:

var curHeight = $('.content').height(),
	autoHeight = $('.content').css('height', 'auto').height();
$(this).prev('.content').height(curHeight).animate({
	height: autoHeight
}, 1000)
$(this).html("收起<i>></i>");

就这样了.

相对来说第一种方便实现一点,第二种效果滑动好看一点.

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/722

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！