“查看更多”--和--“点击收起”（模拟开关事件）

最新推荐文章于 2021-06-02 20:31:00 发布

weixin_33937499

最新推荐文章于 2021-06-02 20:31:00 发布

阅读量170

点赞数

原文链接：http://www.cnblogs.com/candy-Yao/p/7499812.html

版权

原理：

1、首先定义一个开关（其实就是一个标志），默认为开；

2、定义或者获取默认显示的容器（container）的高度（heightm）；

3、点击按钮（#more-news-media）时，如果为“开（true）”，则容器（container）的高设为自动（auto），就将显示所有，此时将开关置为“关”，将按钮上的文字设为“点击收起”；如果为“关（false）”，则容器的高设为第二步中“定义或获取”的高度，此时将开关置为“开”，将按钮上的文字设为“查看更多”。

        /*查看更多*/
	function fn1(){
		var tog=true;
		var heightm=$('.row').height()*4;
		$('.container').height(heightm);
		$('#more-news-media').click(function(){
			if(tog){
				$('.container').css('height', 'auto');
				$('#more-news-media').html('点击收起');
				tog=false;
			}else{
				$('.container').css('height', heightm);
				$('#more-news-media').html('查看更多');
				tog=true;
			}
		})
	}fn1();

转载于:https://www.cnblogs.com/candy-Yao/p/7499812.html