<tr>
<td scope="row"><table border="1">
<tr>
<td id="showbfq" height="20" align="top" onclick="if(bfq.style.display=='none'){bfq.style.display=''showbfq.innerText='优质'}
else{bfq.style.display='none'showbfq.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq" id="bfq" style="display:none">aaa</td>
</tr>
</table></td></tr>
<tr><td><table border="1">
<tr>
<td id="showbfq1" height="20" align="top" onclick="if(bfq1.style.display=='none'){bfq1.style.display=''showbfq1.innerText='优质'}
else{bfq1.style.display='none'showbfq1.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq1" id="bfq1" style="display:none">bbb</td>
</tr>
</table></td></tr>
<tr><td><table border="1">
<tr>
<td id="showbfq2" height="20" align="top" onclick="if(bfq2.style.display=='none'){bfq2.style.display=''showbfq2.innerText='优质'}
else{bfq2.style.display='none'showbfq2.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq2" id="bfq2" style="display:none">ccc</td>
</tr>
</table></td></tr>
</table>
一样的，用一个大表格，把它们竖向的框起来。
<!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>
<title>竖向的折叠菜单</title>
<script language = JavaScript>
function showmenu(id) {
var list = document.getElementById("list"+id)
var menu = document.getElementById("menu"+id)
if (list.style.display=="none") {
document.getElementById("list"+id).style.display="block"
menu.className = "title1"
}else {
document.getElementById("list"+id).style.display="none"
menu.className = "title"
}
}
</script>
<style type="text/css">
<!--
*{margin:0padding:0list-style:nonefont-size:14px}
#nav{margin:10pxtext-align:centerline-height:25pxwidth:200px}
.title{background:#336699color:#fffborder-bottom:1px solid #fffcursor:pointer}
.title1{background:#888color:#000border-bottom:1px solid #666cursor:pointer}
.content li{color:#336699background:#dddborder-bottom:1px solid #fff}
-->
</style>
</head>
<body>
<div id="nav">
<div class="title" id="menu1" onclick="showmenu('1') ">网站制作</div>
<div id="list1" class="content" style="display:none">
<ul>
<li>div+css</li>
<li>网站设计</li>
<li>网站切图</li>
</ul>
</div>
<div class="title" id="menu2" onclick="showmenu('2')">网页代码</div>
<div id="list2" class="content" style="display:none">
<ul>
<li>菜单导航</li>
<li>层和布局</li>
<li>图片切换</li>
</ul>
</div>
</div>
</body>
</html>
看是你想要的吗？
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）