教程集 > 脚本编程 > javascript > 正文原生javascript展开/收缩菜单效果代码

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

发布时间：2016-10-11 编辑：jiaochengji.com

教程集为您提供原生javascript展开/收缩菜单效果代码等资源，欢迎您收藏本站，我们将为您提供最新的原生javascript展开/收缩菜单效果代码资源

本文章来给大家介绍一款原生javascript展开/收缩菜单效果代码，有需要了解的学同可进入参考。

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

<textarea name="runcool" rows="28" cols="75" > <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>

<h1>原生javascript效果：展开/收缩菜单</h1>

</body> </html></textarea>

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

您可能感兴趣的文章：
原生javascript展开/收缩菜单效果代码
 jQuery 淡入淡出、展开收缩菜单实现代码
 Jquery 收缩展开效果的实现代码
 php与js制作的无限级可伸缩菜单
 学习从实践开始之jQuery插件开发菜单插件开发
 在IIS中启用gzip压缩
 ASP.NET控件利用Control.ContextMenu加入快捷菜单
 js伸缩下拉菜单
 jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
jquery 树形菜单代码一例(图文)

上一篇：Javascript 显示/隐藏折叠菜单效果下一篇：基于jquery平滑二级下拉菜单效果

[关闭]

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

最近更新

浏览排行