掩藏显示

2012-09-28

隐藏显示我没想到,居然真的是这么做的.那天就是随便尝试了下,今天闲下来看了下淘宝网生成的页面代码,果然

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title>
<style>
/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.box{ border:2px #000 solid; overflow:hidden;}
.menu {
font-family: arial, sans-serif;
width:300px;
margin:0;
}
.menu ul {padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {float:left;position:relative;}
.menu ul li a, .menu ul li a:visited {display:block;text-align:center;text-decoration:none;width:104px;height:30px;color:#000;border:1px solid #fff;border-width:1px 1px 0 0;background:#c9c9a7;line-height:30px;font-size:11px;}
.menu ul li ul {display: none;}
.menu ul li:hover { z-index:2;}/*★★★★★★★★★★★★★*/
.menu ul li:hover a {color:#fff;background:#b3ab79;}
.menu ul li:hover ul {display:block;position:absolute;top:31px;left:0;width:105px;}
.menu ul li:hover ul li a {display:block;background:#faeec7;color:#000;}
.menu ul li:hover ul li a:hover {background:#dfc184;color:#000;}
</style>

<ul>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
</ul>

</li>
<li><a href="../menu/index.html">DEMOS</a>

<ul>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
</ul>

</li>
<li><a href="../menu/index.html">DEMOS</a>

<ul>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
</ul>

</li>
<li><a href="../menu/index.html">DEMOS</a>

<ul>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="#" title="The zero dollar ads page">zero dollars</a></li>
</ul>

</li>
</ul>
</div>
<br>
<br>
<br>
www
</div>
</body>
</html>

<div id="thecon" style="height:30px;overflow-y:hidden;">
控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码控制隐藏部分显示全部代码
</div>
<a href="javascript:void(0)" id="show" style="display:block" onclick="document.getElementById('thecon').style.height='100%';document.getElementById('hidden').style.display='block';document.getElementById('show').style.display='none';">显示全部</a>
<a href="javascript:void(0)" id="hidden" style="display:none;" onclick="document.getElementById('thecon').style.height='30px';document.getElementById('hidden').style.display='none';document.getElementById('show').style.display='block';">隐藏部分</a>

热点排行

Web前端

掩藏显示