JS CSS 展開與收合選單/按鈕

woff · 發表於 2011-7-15 13:35:08

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包住選單,這樣才不會影響網頁裡的其它清單元素

複製代碼

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>

複製代碼

djf3355 · 發表於 2013-11-14 00:43:30

這個帖不错！！！！！

vgder2776 · 發表於 2013-11-14 00:43:30

回帖是種美德.

mbtshoes403 · 發表於 2013-11-14 00:43:30

支持~~頂頂~~~

莲雪帅帅 · 發表於 2014-2-5 12:50:16

这是真的吗？太好了，谢谢您啊

弄堂口开 · 發表於 2014-10-14 16:39:27

路过看看。

帳號		自動登錄		找回密碼
密碼				註冊

[教學] JS CSS 展開與收合選單/按鈕