下拉菜单(js方法)

html代码:

css代码:

@charset "utf-8";
.left{
	width: 200px;
	height: 502px;
}
.one_ul>li{
	width: 100%;
	text-align: center;
	font-size: 20px;
	border: 1px solid darkgray;
}

.two_ul{
	display: none;
}
.two_ul li{
	width: 100%;
	text-align: center;
	font-size: 15px;
	background: gainsboro;
	border: 1px solid darkgray;
}

效果图:

js方法:

<script type="text/javascript">
		var one_li = document.getElementsByClassName('one_li')[0];
		var one_ul = document.getElementsByClassName('one_ul')[0];
		var two_ul = document.getElementsByClassName('two_ul')[0];
		var one_ul_li = one_ul.getElementsByTagName('li');
		function open() {
			var a = false;
			for(var i = 0; i < one_ul_li.length; i++) {
				one_ul_li[i].addEventListener('click', function() {
					if(a == false) {
						this.nextElementSibling.style.display = 'block';
						a = true;
					} else {
						this.nextElementSibling.style.display = 'none';
						a = false;
					}
				})
			}
		}
		open();
</script>