我没想到,居然真的是这么做的.那天就是随便尝试了下,今天闲下来看了下淘宝网生成的页面代码,果然也是类似的作法.嘎嘎~
利用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>
<!--[if lte IE 6]>
<style>
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
/* Get rid of any default <span href="tag.php?name=tab" onclick="tagshow(event)" class="t_tag">tab</span>le style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
display:block;
position:absolute;
top:32px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
.menu ul li { position:static;}/*★★★★★★★★★★★★★*/
.menu ul li a:hover { z-index:2; position:relative;}/*★★★★★★★★★★★★★*/
</style>
<![endif]-->
</head>
<body>
<div class="box">
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<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>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<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>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<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>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<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>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</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>
分享到：
相关推荐
JavaScript 控制隐藏显示 TABLE 特定列 在 HTML 中，我们经常需要控制 TABLE 的显示和隐藏，特别是在数据表格中，需要根据用户的选择来显示或隐藏某些列。今天，我们将介绍使用 JavaScript 控制隐藏显示 TABLE 特定...
本文将深入探讨"jqurey插件隐藏显示层"这一主题，特别是`toggleElementS`插件的使用方法及其背后的原理。 首先，让我们了解`toggleElementS`插件的基本功能。正如标题所言，它是一个用于元素展开和隐藏的工具，适用...
C#窗体实现热键控制窗口隐藏显示 主要类文件 class HotKey { //如果函数执行成功，返回值不为0。 //如果函数执行失败，返回值为0。要得到扩展错误信息，调用GetLastError。 [DllImport("user32.dll", ...
点击按钮（a标签）隐藏显示div内容，切换div内容
主表控制明细列隐藏显示
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括隐藏和显示元素。本文将深入探讨如何利用 jQuery 实现表格行的隐藏与显示功能，同时也会涉及到一些基本的 HTML 和 ...
可快速隐藏显示桌面图标，程序启动后托盘图标显示。
标题“wincc画面图层的隐藏显示”涉及到的关键知识点有： 1. **WinCC画面设计**：在WinCC中，我们可以通过图形化工具创建和编辑画面，每个画面可以包含多个图层。图层管理允许用户灵活组织和控制画面内容的展示。 ...
在Android应用开发中，用户输入密码时，为了保护用户的隐私，通常会使用`EditText`控件的`password`属性来隐藏显示的字符，通常显示为星号或圆点。然而，在某些情况下，如用户需要检查他们输入的密码是否正确，就...
隐藏显示窗口小工具，办公玩游戏必备！ 1.隐藏指定窗口，将窗口最前显示，按下Ctrl+Z,即可隐藏； 2.隐藏句柄保存在D盘根目录下，在窗口没有显示出来时，请勿按F5进行重置，不然已隐藏窗口将无法显示出来 3.显示所有...
使用`<transition>`标签包裹需要添加动画的元素，例如一个简单的显示和隐藏按钮： ```html !show">切换 这是一段需要动画的文本 ``` 在这里，我们给`<transition>`组件设定了一个唯一的name属性，用于...
在这个“易语言隐藏显示滚动条例程”中，我们将深入探讨如何使用易语言来控制窗口中的滚动条的可见性。 首先，我们要明白滚动条在用户界面中的作用。滚动条通常用于在内容超过窗口可视区域时提供导航，允许用户上下...
listview 实现隐藏显示headerview
其中，“Skyline图层隐藏显示”是一个常见且实用的功能，主要涉及到如何利用JavaScript代码来动态控制地图上特定图层的可见性，以达到优化地图展示效果、提升用户体验的目的。 ### 关键知识点解析 #### 1. Skyline...
"易语言组件隐藏显示"这个主题涉及到的是如何在易语言程序中动态地改变组件的状态，使其在用户界面上消失或显现。在易语言中，隐藏组件通常使用“隐藏”命令，显示组件则使用“显示”命令。这两个命令可以直接对组件...
使用线程控制显示/隐藏按钮, 无操作一段时间后,隐藏显示的按钮
这个小案例"ListView隐藏显示头布局"探讨的是如何动态地控制ListView的头部视图（Header View）根据用户滚动行为进行显示或隐藏，实现类似刷新效果的功能。下面将详细解释这一技术的实现原理和步骤。 1. **Header ...
《易语言组件隐藏显示源码解析》 在编程领域，组件是软件开发中不可或缺的一部分，它们为开发者提供了可重用的代码模块，大大提升了开发效率。易语言作为一款国内广泛使用的编程工具，其组件库丰富多样，适用于各种...
综上所述，掌握JavaScript和jQuery中的元素隐藏显示和文本内容变化对于前端开发至关重要。这些基本技巧不仅可以增强用户体验，也是构建交互式网页的关键步骤。通过实践这些示例，开发者可以更好地理解和应用这些概念...