overflow实现信息的显示和隐藏

我没想到,居然真的是这么做的.那天就是随便尝试了下,今天闲下来看了下淘宝网生成的页面代码,果然也是类似的作法.嘎嘎~

利用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" onclick="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.反之亦然．

不过这个写法太粗糙了,有时间再优化下.