当前位置：编程学习 > JS >>

原生javascript展开/收缩菜单效果代码

提示：您可以先修改部分代码再运行

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生javascript效果：展开/收缩菜单 </title>
<meta name="keywords" content="展开菜单效果,收缩菜单效果" />
<meta name="description" content="原生javascript效果：展开/收缩菜单" />

<style type="text/css">
.menu {width:200px; margin:20px auto; border:1px solid #ccc;}
.menu h3 {height:30px; line-height:30px; font-weight:bold; background:#333 url(sprite.png) no-repeat 180px 12px; cursor:pointer; text-indent:10px; color:#fff;}
.menu h3.on {background-position:180px -13px;}
.menu ul {display:none; padding:10px; background:#eee;}
.menu ul.on {display:block;}
.menu ul li {height:26px; line-height:26px; border-bottom:1px dotted #ccc; text-indent:10px;}
</style>

<script type="text/javascript">
window.onload=function () {
	var oH3 = document.getElementById("h3A");
	var oUl = document.getElementById("ulA");
	
	oH3.onclick=function () {
		if(this.className == '') {
			this.className = 'on';
			oUl.className = 'on';
		} else {
			this.className = '';
			oUl.className = '';
		}
	};
};
</script>
</head>

<body>
<div class="wrapper">
	<h1>原生javascript效果：展开/收缩菜单</h1>

<div class="menu">
		<h3 id="h3A">jquery特效</h3>
		<ul id="ulA">
			<li>jquery焦点图</li>
			<li>jquery选项卡</li>
			<li>jquery表单验证</li>
			<li>jquery特效</li>
			<li>jquery闪烁字</li>
		</ul>
	</div>

</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

补充：网页特效,导航菜单

上一个：原生javascript延时导航菜单条效果
下一个：js 当鼠标移动到二级菜单时当前一级菜单高亮

更多图片编程知识:

更多JS疑问解答：: 几个验证11位手机号码格式的js代码; js把图片转换成 base64代码; js把base代码转换成图片; JS 将 base64编码的图片转化为图片文件; js中的定时器; js如何获得FCKeditor控件的值; 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...; JS验证，这块“牛皮”反复修改都不能实现; 在JS中使用DOM模型; 如何用JS 获取本地文件夹的文件列表; js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？; 求实现自动生成图片缩略图的JS代码; JS脚本网页问题; js，代码中"object"和"Object"区别？; js+flash实现网页图片切换效果，出现边框，单击激活此控件。

站长资源库

微信小程序

如果你遇到编程学习难题：
访问www.zzzyk.com 试试

CopyRight © 2022 站长资源库编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络，