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

Html:
<div class="foot_nav">
<ul class="clearfix">
<li>
<div class="subtit">Products</div>
<div class="drop-down special">
<ul>
<li><a href="">SpO2</a></li>
<li><a href="">ECG</a></li>
<li><a href="">EKG</a></li>
<li><a href="">Temp.</a></li>
<li><a href="">NIBP</a></li>
<li><a href="">IBP</a></li>
<li><a href="">Fetal</a></li>
<li><a href=""> EEG </a></li>
<li><a href=""> O2 sensor </a></li>
<li><a href=""> Pelvic electrode </a></li>
<li><a href="">EEG Sensor</a></li>
<li><a href=""> New Arrvials </a></li>
</ul>
<div class="more_btn">
<span>More</span>
</div>
</div>
</li>
<li>
<div class="subtit">Support</div>
<div class="drop-down">
<ul>
<li><a href="">Technical support</a></li>
<li><a href="">Data download</a></li>
<ul>
</div>
</li>
</ul>
</div>
Js:
$(function(){
var hide=$('.special ul li:gt(1)');
$(hide).hide();
var btn=$('.more_btn span');
$(btn).click(function(){
if($(hide).is(":visible")){
$(hide).hide();
$(this).css("background-image",'url(images/img141.png)').text('More');
}else{
$(hide).show();
$(this).css({'background-image':'url(images/img141a.png)'}).text("Hide");
}
return false;
})
})
這其中用到了:gt() 選擇器，這里是選擇前2個(gè)之后的所有 li元素使其隱藏。:gt(index) index的值從0開(kāi)始。
第二種是展示折疊更多內(nèi)容文字，可以將長(zhǎng)長(zhǎng)的文字按照要求進(jìn)行折疊展示，效果如下圖所示：
 


Html:
<div class="introduction">
<ul>
<li>
<div class="tit">先生</div>
<div class="txt">
<div class="sp">1968年8月出生，中國(guó)國(guó)籍，無(wú)境外永久居留權(quán)，大專(zhuān)學(xué)歷，中國(guó)注冊(cè)會(huì)計(jì)師。<br />
1988年7月至1998年4月，歷任醫(yī)藥保健品進(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ù)官</div>
</div>
<div class="more_btn">
<span class="mbtn">展開(kāi)詳情+</span>
</div>
<div class="icon"></div>
</li>
<li>
<div class="tit">
女士
</div>
<div class="txt">
<div class="sp">1968年8月出生，中國(guó)國(guó)籍，無(wú)境外永久居留權(quán)，大專(zhuān)學(xué)歷，中國(guó)注冊(cè)會(huì)計(jì)師。<br />
1988年7月至1998年4月，歷任醫(yī)藥保健品進(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ó)籍，無(wú)境外永久居留權(quán)，大專(zhuān)學(xué)歷，中國(guó)注冊(cè)會(huì)計(jì)師。<br />
1988年7月至1998年4月，歷任醫(yī)藥保健品進(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ù)官</div>
</div>
<div class="more_btn">
<span class="mbtn">展開(kāi)詳情+</span>
</div>
<div class="icon"></div>
</li>
</ul>
</div>
Js:
$(function(){
$(".introduction ul li").click(function () {
var hei = $(this).find('.sp').height();
if($(this).hasClass('on')){
$(this).removeClass('on');
$(this).find('.mbtn').html("展開(kāi)詳情+");
$(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'
});
}
});
})