TShopping
標題:
JS CSS 展開與收合選單/按鈕
[打印本頁]
作者:
woff
時間:
2011-7-15 13:35
標題:
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>
複製代碼
作者:
djf3355
時間:
2013-11-14 00:43
這個帖不错!!!!!
作者:
vgder2776
時間:
2013-11-14 00:43
回帖是種美德.
作者:
mbtshoes403
時間:
2013-11-14 00:43
支持~~頂頂~~~
作者:
莲雪帅帅
時間:
2014-2-5 12:50
这是真的吗?太好了,谢谢您啊
作者:
弄堂口开
時間:
2014-10-14 16:39
路过 看看。
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2