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" ο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.反之亦然．

不過這個寫法太粗糙了,有時間再優化下.