JS下拉列表动态收缩与展开

 

提示：经过测试用起来效果非常好，只要你灵活地去修改以适用于自己的菜单列表，结果绝对满意，在没有自己写之前我也在网上查过许多，但是都是要么无法满足自动收缩和展开，要么就是定义复杂无法通过连接数据库批量定义，而下边的JS代码不用修改，只要按照HTML格式去为菜单父列表添加<div οnclick="filters(this)">就好，使用非常简单。

简述

JS代码中的intag是事件源，放在事件中就是this，只要你的下拉列表的JSP或者HTML5代码符合下边示例的规范，就可以直接复制JS代码并直接引用。

使用方法：

下拉列表定义格式(每个div添加事件)，只需要在每一个父菜单添加<div οnclick="filters(this)">一级菜单</div>

 

<ul>
			<li><div onclick="filters(this)">一级菜单</div>
				<ul>
					<li>第一</li>
					<li>第一</li>
					<li><div onclick="filters(this)">二级菜单</div>
						<ul>
							<li>第二</li>
							<li>第二</li>
							<li>第二</li>
						</ul></li>
					<li>第一</li>
				</ul></li>
			<li><div onclick="filters(this)">一级菜单</div></li>
		</ul>

 

 

 

 

 

JS代码  如果需要页面加载以后就将整个列表展开则去掉executeInstently()函数

 

<script type="text/javascript">
		//浏览器加载以后立即执行,初始化
		function executeInstently() {
			var tmp = document.getElementsByTagName("ul");
			for (i = 1; i < tmp.length; i++) {
				tmp[i].style.display = "none";
			}
		}
		function filters(intag) {
			if (intag.tagName == "DIV" || intag.tagName == "div") {
				var taga = intag.parentNode;
				var present = taga.getElementsByTagName("ul")[0];
				if (present.style.display == "block") {
					help(taga);
				} else {
					help(taga);
					present.style.display = "block";
				}
			}
			function help(intag) {
				var fathertag = intag.parentNode;
				var sontag = fathertag.getElementsByTagName("ul");
				for (i = 0; i < sontag.length; i++) {
					sontag[i].style.display = "none";
				}
			}
		}
		executeInstently();
	</script>