我没想到,居然真的是这么做的.那天就是随便尝试了下,今天闲下来看了下淘宝网生成的页面代码,果然也是类似的作法.嘎嘎~
利用overflow实现显示全部信息和隐藏部分信息.
不过偶写的很粗糙,还没利用overflowX,overflowY这两个样式.
<ul id="cata_list" style="overflow:hidden;">
<%
int len=listCatalog.length;
String acid="";
for (int i=0; i<len; i++){
acid=listCatalog[i].getString("id");
%>
<li style="margin-left:15px;">
<a href="<%=webRoot%>/new_index0803/catalog/catalist-s-<%=pcid%>-<%=decrytUtil.encryptString(acid)%>.jspx">
<%=listCatalog[i].getString("title")%></a>(<%=productMgr.getProCountByCid(acid,"2")%>)
</li>
<%if(i==9){%>
<ul style="display: none;" id="hid_div">
<%
String aacid="";
for (int j=i+1;j<len;j++){
aacid=listCatalog[j].getString("id");
%>
<li><a href="<%=webRoot%>/new_index0803/catalog/catalist-s-<%=pcid%>-<%=decrytUtil.encryptString(aacid)%>.jspx">
<%=listCatalog[j].getString("title")%></a>(<%=productMgr.getProCountByCid(aacid,"2")%>)</li>
<%} %>
</ul>
<%break;}
}
%>
</ul>
<% if(len>10){
%>
<div id="div_btn" οnclick="doShow('cata_list');">显示所有分类</div>
<%} %>
/*商品分类展示处样式的改变*/ function doShow(hiddiv){ var cdiv=document.getElementById(hiddiv); if(cdiv.style.overflow=="scroll"){ document.getElementById(hiddiv).style.overflow="hidden"; document.getElementById("hid_div").style.display="none"; document.getElementById("div_btn").innerHTML="显示所有分类"; }else { document.getElementById(hiddiv).style.height='200px'; document.getElementById(hiddiv).style.overflow="scroll"; document.getElementById("hid_div").style.display="block"; document.getElementById("div_btn").innerHTML="隐藏部分分类"; } }
效果图:
如果只想在x轴方向那就用overflowX.反之亦然.
不过这个写法太粗糙了,有时间再优化下.