網(wǎng)站前端制作之點(diǎn)擊展開更多效果

　　點(diǎn)擊展開更多

　　第一種是底部導(dǎo)航欄下拉展示更多，默認(rèn)顯示n個(gè)，超出n個(gè)則隱藏，點(diǎn)擊more展示更多，效果如下圖所示：

　　Html：

　　pclass=foot_nav

　　ulclass=clearfix

　　pclass=subtitProducts/

　　pclass=drop-downspecial

　　ul

　　/ul

　　pclass=more_btn

　　spanMore/span

　　/

　　/

　　/li

　　pclass=subtitSupport/

　　pclass=drop-down

　　ul

　　ul

　　/

　　/li

　　/ul

　　/

　　Js：

　　$(function(){

　　varhide=$('.specialulli：gt(1)');

　　$(hide).hide();

　　varbtn=$('.more_btnspan');

　　$(btn).click(function(){

　　if($(hide).is(：visible)){

　　$(hide).hide();

　　$(this).css(background-image，'url(images/img14

　　1.png)').text('More');

　　}else{

　　$(hide).show();

　　$(this).css({'background-image'：'url(images/img141a.png)'}).text(Hide);

　　}

　　returnfalse;

　　})

　　})

　　這其中用到了：gt()選擇器，這里是選擇前2個(gè)之后的所有l(wèi)i元素使其隱藏。：gt(index)index的值從0開始。

　　第二種是展示折疊更多內(nèi)容文字，可以將長(zhǎng)長(zhǎng)的文字按照要求進(jìn)行折疊展示，效果如下圖所示：

　　Html：

　　pclass=introduction

　　ul

　　pclass=tit先生/

　　pclass=txt

　　pclass=sp1968年8月出生，中國(guó)國(guó)籍，無境外永久居留權(quán)，大專，中國(guó)注冊(cè)會(huì)計(jì)師。br/

　　1988年7月至1998年4月，歷任保健品進(jìn)出口公司財(cái)務(wù)科會(huì)計(jì)、科長(zhǎng)；1998年5月1999年1月，任高科技有限公司財(cái)務(wù)總監(jiān)；2000年至今，任醫(yī)療用品股份有限公司董事、副總經(jīng)理、首席財(cái)務(wù)官/

　　/

　　pclass=more_btn

　　span class=mbtn展開詳情+/span

　　/

　　pclass=icon/

　　/li

　　pclass=tit

　　女士

　　/

　　pclass=txt

　　pclass=sp1968年8月出生，中國(guó)國(guó)籍，無境外永久居留權(quán)，大專，中國(guó)注冊(cè)會(huì)計(jì)師。br/

　　1988年7月至1998年4月，歷任保健品進(jìn)出口公司財(cái)務(wù)科會(huì)計(jì)、科長(zhǎng)；1998年5月1999年1月，任高科技有限公司財(cái)務(wù)總監(jiān)；2000年至今，任醫(yī)療用品股份有限公司董事、副總經(jīng)理、首席財(cái)務(wù)官1968年8月出生，中國(guó)國(guó)籍，無境外永久居留權(quán)，大專，中國(guó)注冊(cè)會(huì)計(jì)師。br/

　　1988年7月至1998年4月，歷任保健品進(jìn)出口公司財(cái)務(wù)科會(huì)計(jì)、科長(zhǎng)；1998年5月1999年1月，任高科技有限公司財(cái)務(wù)總監(jiān)；2000年至今，任醫(yī)療用品股份有限公司董事、副總經(jīng)理、首席財(cái)務(wù)官/

　　/

　　pclass=more_btn

　　span class=mbtn展開詳情+/span

　　/

　　pclass=icon/

　　/li

　　/ul

　　/

　　Js：

　　$(function(){

　　$(.introductionulli).click(function(){

　　varhei=$(this).find('.sp').height();

　　if($(this).hasClass('on')){

　　$(this).removeClass('on');

　　$(this).find('.mbtn').html(展開詳情+);

　　$(this).find('.txt').css({

　　'height'：'56px'，'transition-duration'：'400ms'

　　});

　　}else{

　　$(this).addClass('on');

　　$(this).find('.mbtn').html(收起);

　　$(this).find('.txt').css({

　　'height'：hei，'transition-duration'：'400ms'

　　});

　　}

　　});

　　})