1. 程式人生 > >“查看更多”--和--“點擊收起”(模擬開關事件)

“查看更多”--和--“點擊收起”(模擬開關事件)

顯示 ont edi pre 點擊 事件 .html contain blog

原理:

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();

  

“查看更多”--和--“點擊收起”(模擬開關事件)