获取元素高度一直是用height(),但没想到这个还是存在bug。
当指定元素不只是一行的时候,那就没办法获取真实的高度了,做了一下测试才发现,原来jquery的height ()只是获取css指定的line-height而已,当存元素包含在多行文字时,也只能获取一行的line-height,
项目《手机版页面》通过元素行高来判断是否使用More Detail显示更多介绍
HTML如下:
<div class="product-collateral">
<div class="box-collateral box-description">
<h2 class="nav_btui" style="border-top:1px solid #f5f5f5; ">Spezifikationen <a href="#" class="show_icon nav_tit ui-link"><i class="icon-arrow-up"></i></a></h2>
<div class="std hide">
<li>【Hochwertig】Tischplatte aus E1 Spanplatte mit Melamin-Furnier hergestellt, Tischbeine aus Stahlrohr, langlebig, robust und umweltfreundlich, leicht zu reinigen
</li>
<li>【Vielfältig einsetzbar】Als Computertisch, Schreibtisch, Bürotisch, Konferenztisch usw. dienen
</li>
<li>【Große Tischplatte】Genug benutzbar Platz und viele Ablagemöglichkeiten; Mit Melaminharzbeschichtung ausgestattet, glatt, kratzfest und leicht zu reinigen
</li>
<li>【Feines Design】Abgerundete Ecken der Tischplatte für mehr Sicherheit; Tischplatte In der Holz Farbe, geeignet für alle Raumstil, nie veralten
</li>
<li>【Einfaches Aufbauen】Einfache Struktur, leicht aufzubauen </li></div><a href="javascript:void(0)" class="showmore">Mehr Details</a>
</div>
</div>
</div>
CSS如下:
.product-collateral .box-collateral *{line-height: 20px;padding: 0px;}
.product-collateral .box-collateral li{padding-left:1rem;list-style: none;}
.product-view .box-description .std { margin:0;margin-bottom: 15px;}
.product-view .box-description .std table{width:100% !important;}/*强制表格不越屏*/
.product-view .box-description .std img{max-width:100% !important;}/*强制图片不越屏*/
.product-view .box-description .hide {max-height:120px;overflow: hidden; }
.product-view .box-description .show {max-height:none;overflow:none; }
.product-view .box-description .showmore{text-align: center;display: block;line-height: 30px;}
JQUERY如下:
jQuery(document).ready(function(){
var detail = jQuery('.product-collateral .box-collateral .std');
var init_height = detail.height();//获取初始高度
detail.addClass('hide');//增加限高样式
var max_height = parseInt(detail.css('max-height'))//获取限制高度
var now_height = parseInt(detail.height())//获取限制高度
if(init_height>now_height){
//如果初始高度大于限高后的高度,则显示更多选择
detail.after("<a href='javascript:void(0)' class='showmore'>More Details</a>");
}
jQuery('.product-collateral .box-collateral .showmore').live("click", function(){
if(jQuery(this).text()=='More Details'){
jQuery(this).text('Hide Details');
}else{
jQuery(this).text('More Details')
}
jQuery(this).prev().toggleClass('hide');
});
jQuery('.product-collateral .box-collateral .show_icon').live("click", function(){
jQuery(this).parent().next().toggle('1000');
jQuery(this).parent().nextAll('.showmore').first().toggle();
jQuery(this).children().toggleClass('icon-arrow-bottom');
// jQuery(this).toggleClass('ui-icon-carat-u');
});
});
临时解决方案:
var detail = jQuery('.product-collateral .box-collateral .std');
改为
var detail = jQuery('.product-collateral .box-collateral .std :last');