“查看更多”--和--“點擊收起”(模擬開關事件)
阿新 • • 發佈:2017-09-10
顯示 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();
“查看更多”--和--“點擊收起”(模擬開關事件)