求一个 HTML的竖向折叠菜单 源码

求一个 HTML的竖向折叠菜单 源码,第1张

<!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>

看是你想要的吗?

<table border="0" cellspacing="0" cellpadding="0">

<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>

一样的,用一个大表格,把它们竖向的框起来。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7065072.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存