JS CSS 展開與收合選單/按鈕
HTML原始碼請參考如下<html>
<head>
<title>展開收合選單</title>
<script language="JavaScript">
<!--
var currentMenu = 1;
function ShowSubMenu(id) {
if (document.all["SubMenu" + id].style.display == "")
{
document.all["SubMenu" + id].style.display = "none";
currentMenu = 0;
}
else
{
if (currentMenu != 0) {document.all["SubMenu" + currentMenu].style.display = "none";}
document.all["SubMenu" + id].style.display = "";
currentMenu = id;
}
}
-->
</script>
</head>
<body>
<ul>
<li><a href="JavaScript:ShowSubMenu(1)">A</a>
<ul id="SubMenu1 " style="display:none;">
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>
</li>
<li><a href="JavaScript:ShowSubMenu(2)">B</a>
<ul id="SubMenu2 " style="display:none;">
<li>b1</li>
<li>b2</li>
<li>b3</li>
</ul>
</li>
<li>C</li>
</ul>
</body>
</html>
如果有很多按鈕要做展開/收合
只要繼續往下編號就可以了,編號不可以重複,不然或錯誤喔~
以上的範例只有用到CSS的隱藏屬性(style="display:none;")
用CSS美化
1.先用div包住選單,這樣才不會影響網頁裡的其它清單元素
<div id="sample2">
<ul>
<li><a href="JavaScript:ShowSubMenu(1)">A</a>
<ul id="SubMenu1 " style="display:none;">
<li>a1</li>
<li>a2</li>
<li>a3</li>
</ul>....略
</div>
2.在網頁原始碼的<head></head>標籤裡加上CSS,範例如下
<style type="text/css">
<!--
#sample2 {width:150px;font-family:Arial;}
#sample2 ul {margin:0;padding:0;}
#sample2 li {list-style-type:none;background:url(images/menu-sample2-bg.gif) repeat-x;margin:2px 0;text-align:center;}
#sample2 li a {color:#666;text-decoration:none;display:block;width:150px;height:25px;line-height:25px;}
#sample2 ul ul {background:#FFF;}
#sample2 li li { background:url(images/menu-sample2-bg2.gif) repeat-x; color:#369;height:25px;line-height:25px; }
-->
</style>
這個帖不错！！！！！ 回帖是種美德. 支持~~頂頂~~~ 这是真的吗？太好了，谢谢您啊
路过 看看。
頁:
[1]