怎么做出这效果
我想在左侧的网页中，做出几行菜单，每个都有自己的子菜单当用户典籍的时候就可以，自动显示出来子菜单将下面的结构
开始的状态
aaa
bbb
ccc
ddd
当用户点击aaa的时候
aaa
a1
a2
a3
bbb
ccc
ddd
当用户点击bbb的时候
aaa
bbb
b1
b2
b3
ccc
ddd
依此类推
请大虾把代码贴出来，最好有现成的网页，发给我f286@126.com
问题点数：80、回复次数：7Top
1 楼popcode（枫.net）回复于 2003-12-03 21:18:06 得分 80
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
A:active { TEXT-DECORATION: none}
A:visited { TEXT-DECORATION: none}
A:hover { COLOR: #FF0000;TEXT-DECORATION: none}
A:link { TEXT-DECORATION: none}
body { FONT-FAMILY: "MS Shell Dlg", "Tahoma", "sans-serif"; font-size: 10pt; COLOR: 000000; ; text-decoration: none}
tr { FONT-FAMILY: MS Shell Dlg, Tahoma,sans-serif; font-size: 10pt; }
td { FONT-FAMILY: MS Shell Dlg,Tahoma, sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: normal}
form {FONT-FAMILY: MS Shell Dlg,tahoma,宋体; FONT-SIZE: 10pt}
.black { color: #000000; font-size: 10pt; }
.white { color: #ffffff; font-size: 9pt; }
.red { color: #ff0000; font-size: 9pt; }
.green { color: #009900; font-size: 9pt; }
.c990000 { color: #990000; font-size: 9pt; }
.cFF9900 { color: #FF9900; font-size: 9pt; }
.c333399 { color: #333399; font-size: 9pt; }
.blue { color: #0000FF; font-size: 9pt; }
.blue1 { color: #3300cc; font-size: 9pt; }
.gray { color: #666666; font-size: 9pt; }
.row {line-height: 15pt}
.bottom { BACKGROUND-COLOR: #CCCCCC; BORDER-BOTTOM: #665b8e 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-RIGHT: #665b8e 1px solid; BORDER-TOP: #ffffff 1px solid; COLOR: #000000; FONT-FAMILY: "宋体"; HEIGHT: 18px; font-size: 10pt}
.editbox1 { BACKGROUND-COLOR: #DBDBDB; COLOR: #000000; FONT-FAMILY: 宋体; HEIGHT: 18px; font-size: 10pt}
.editbox3 { BACKGROUND-COLOR: #FFFFFF; COLOR: #000000; FONT-FAMILY: 宋体; HEIGHT: 18px; font-size: 10pt}
.editbox2 { COLOR: #000000; CURSOR: text; FONT-SIZE: 10pt; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; background-color: #DBDBDB; FONT-FAMILY: 宋体}
.size { font-size: 9px; font-family: "Verdana", "Arial", "Helvetica", "sans-serif"}
A.yellow:active { TEXT-DECORATION: none; color: #FFFFFF}
A.yellow:visited { TEXT-DECORATION: none; color: #FFFFFF}
A.yellow:link { COLOR:ffffff;TEXT-DECORATION: none}
A.yellow:hover {COLOR: #FFff33; TEXT-DECORATION: none}
</style>
Top
2 楼popcode（枫.net）回复于 2003-12-03 21:18:20 得分 0
<script language=JavaScript1.2>
scores = new Array(20);
var numTotal=0;
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
if (ver4) {
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
else {
write(".child {display:none}")
}
write("</STYLE>");
}
}
function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}
function arrange() {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}
function expandIt(el) {
if (!ver4) return;
if (IE4) {
whichEl1 = eval(el + "Child");
for(i=1;i<=numTotal;i++){
whichEl = eval(scores[i] + "Child");
if(whichEl!=whichEl1) {
whichEl.style.display = "none";
}
}
whichEl1 = eval(el + "Child");
if (whichEl1.style.display == "none") {
whichEl1.style.display = "block";
}
else {
whichEl1.style.display = "none";
}
}
else {
whichEl = eval("document." + el + "Child");
for(i=1;i<=numTotal;i++){
whichEl = eval("document." + scores[i] + "Child");
if(whichEl!=whichEl1) {
whichEl.visibility = "hide";
}
}
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange();
}
}
onload = initIt;
</script>
Top
3 楼alexzhang00（三角猫）回复于 2003-12-03 21:18:49 得分 0
CSDN 论坛首页的 左边 不就是？Top
4 楼popcode（枫.net）回复于 2003-12-03 21:19:06 得分 0
</head>
<body oncontextmenu=self.event.returnValue=false>
<table cellspacing=0 cellpadding=0 width=120 border=0>
<tbody><tr><td><div id=KB1Parent>
<a onClick="expandIt('KB1'); return false" href="#" class=black>
aaa</a></div>
<div class=child id=KB1Child>a1<br>
a2<br></div>
<div id=KB2Parent><a onClick="expandIt('KB2'); return false" href="#" class=black>
bbbb</a></div>
<div class=child id=KB2Child>b1<br>
b2<br>
b3</div>
<div id=KB3Parent><a onClick="expandIt('KB3'); return false" href="#" class=black>
ccc</a></div>
<div class=child id=KB3Child>c1<br>
c2<br></div>
<script>numTotal=3;scores[1]='KB1';scores[2]='KB2';scores[3]='KB3';</script>
</td>
</tr>
</tbody>
</table>
</body>
</html>Top
5 楼f286（范哲）回复于 2003-12-03 23:12:31 得分 0
请问我为什么不能够修改，一修改子菜单就不会自动出来？？Top
6 楼popcode（枫.net）回复于 2003-12-03 23:44:07 得分 0
增加一个层
这里就要加一个
<script>numTotal=3;scores[1]='KB1';scores[2]='KB2';scores[3]='KB3';</script>
比如要4个层：
<div id=KB4Parent><a onClick="expandIt('KB4'); return false" href="#" class=black>
ddd</a></div>
<div class=child id=KB4Child>d1<br/>
d2<br/></div>
<script>numTotal=3;scores[1]='KB1';scores[2]='KB2';scores[3]='KB3';scores[4]='KB4';</script>
Top
7 楼f286（范哲）回复于 2003-12-04 23:25:23 得分 0
谢了，我搞定了！Top
