`

菜单自动展开（js实现）

阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Untitled
        </title>
        <script>
        	window.onload = function() {
        		var childs = document.getElementById("container").childNodes;
        		for (var i = 0;i < childs.length;i++) {
        			if (childs[i].tagName == "LI") {
        				addEvent(childs[i]);
        			}
        		}
        	}
        	function addEvent(o) {
        		var as = o.getElementsByTagName("a");
        		as[0].onclick = function(e){
        			var theEvent = window.event || e;
        			var link = theEvent.srcElement ? theEvent.srcElement : theEvent.target;
        			var uls  = link.parentNode.childNodes;
	        		for (var i = 0;i < uls.length;i++) {
	        			if (uls[i].tagName == "UL") {
	        				if (uls[i].style.display == "none") {
	        					uls[i].style.display = "";
	        				} else {
	        					uls[i].style.display = "none";
	        				}
	        			}
	        		}
        		}
        	}
        </script>
    </head>
    <body>
        <ul id="container">
            <li>
            	<a href="#">Menu01</a>
            	<ul>
            		<li>A1</li>
            		<li>A2</li>
            	</ul>
            </li>
            <li>
            	<a href="#">Menu02</a>
            	<ul>
            		<li>B1</li>
            		<li>B2</li>
            	</ul>
            </li>
        </ul>
    </body>
</html>
分享到：
| db_file_multiblock_read_count 对cost的影 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js实现点击向下展开的下拉菜单效果代码

    主要介绍了js实现点击向下展开的下拉菜单效果代码,涉及javascript鼠标事件控制页面元素样式变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    js 实现 鼠标移到下拉框时自动全部打开

    js 实现 鼠标移到下拉框时自动全部打开! 值得下载看看!资源免费,大家分享!!

    div+css+js实现菜单的收缩与展开

    div+css+js实现菜单的收缩与展开! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    可折叠的自动伸缩菜单

    这一篇主要讲JS特效代码大全（三）可折叠的自动伸缩菜单。可折叠的自动伸缩菜单适合于最多到二级菜单、菜单数量较多且页面要求比较精致的网站，打开一个菜单的同时另一个菜单就会自动缩回去。

    JS实现鼠标滑过折叠与展开菜单效果代码

    这是一款展开菜单特效，鼠标移上的时候自动展开，移走后自动折叠隐藏起来，运用了JS技术，并结合了CSS共同实现的效果。本折叠菜单类似QQ可折叠的好友列表一样，不少人喜欢这种菜单。 运行效果截图如下： 在线演示...

    js实现横向弹出二级菜单

    二级横向导航栏菜单效果，鼠标移动到文字上，二级导航横向展开，移走后自动消失

    原生JS制作自动+手动轮播图，附带二级分类菜单

    原生JS制作自动+手动轮播图，附带二级分类菜单 包含以下功能： 1、鼠标移开自动轮播 2、鼠标移入停止自动轮播 3、点击左右按钮可手动切换图片 4、点击索引小圆点可手动切换图片 5、鼠标移入一级菜单展开二级...

    JavaScript可展开隐藏的侧边栏下拉菜单

    这是一款基于纯JavaScript实现的侧边栏菜单，因为整个菜单并没有使用jQuery等第三...这款JS侧边栏菜单的特点是点击按钮可以展开和隐藏，并且在隐藏时自动显示提示文字，展开后又隐藏提示文字，很好地做到了自适应效果。

    Div+CSS+JS 三级树形菜单

    Div+CSS+JS的三级树形菜单，很实用的。 一级菜单可以同时展开，二级菜单只能展开一个，其他自动关闭。 bitding 修正版。

    JS实现三级折叠菜单特效，其它级可自动收缩

    主要介绍了JS实现三级折叠菜单特效，其它级可自动收缩,需要的朋友可以参考下

    js模仿163网盘竖向折叠菜单

    竖可折叠的二级导航菜单，每次只能展开一个菜单，其他自动折叠

    CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

    这里用CSS+JS实现点击文字后动画展开一个DIV层菜单，到期会自动关闭，是CSS结合JS实现的效果。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    combox实现的可编辑下拉框

    combox实现的可编辑下拉框 可编辑下拉框，其实就是在下拉框的上面放了个无边框的输入框，在输入框输数据时，下拉框自动定位,下拉框选中某项时，下拉框的值赋给输入框，从而产生错觉

    win8平板风格伸缩展开的菜单特效.rar

    win8平板风格伸缩展开的菜单特效，鼠标悬停于菜单上时，菜单项内容展开变长，移开后自动收缩回原样，整体风格和现在的Windows8系统的布局风格十分相似，目前这种风格正在流行，技术实现：jquery CSS JavaScript。

    js下拉菜单

    漂亮的js下拉菜单，当鼠标单击的时候自动展开相应的子菜单！

    CSS+JS点击展开/隐藏的折叠菜单特效代码

    可折叠的自动伸缩侧边菜单.zip

    可折叠的自动伸缩侧边菜单，简洁实用，可以自定义哪个展开折叠，只要定义demo中的script【0】，控制参数，可相对应的变量名字即可。有智能手机、手机配件、平板电脑、操作系统、老人机、插卡固话等栏目菜单内容。

    手机端jQuery响应式菜单栏代码

    手机端jQuery响应式菜单栏代码，把浏览器宽度调整到480像素查看效果，点击菜单右上角展开菜单。适用于手机浏览器。

    jQuery 动感三级菜单，横向自动展开

    内容索引:脚本资源,jQuery,动感菜单,三级菜单　jQuery 动感三级菜单，横向自动展开，先看看演示效果，是不是挺漂亮的，国外的东西，就是不一般哦。从演示来看，它好像最多支持三级，颜色搭配也及其合理，有动感缓冲...

Magicbox
Global site tag (gtag.js) - Google Analytics