下拉菜单案例

来源：互联网发布：linux mint 18界面美化编辑：程序博客网时间：2024/06/14 09:23

<html><head><style>#d1{width:250px;height:400px;background-color:#cccccc;margin-left:40px;margin-top:40px;}#d2{height:30px;background-color:blue;color:white;}</style><script>function doAction(index){var obj = document.getElementById('u'+index);if(obj.style.display == 'none'){obj.style.display = 'block';}else{obj.style.display = 'none';}}function test(){alert(document.getElementById('l1').innerHTML);}function change(){var obj = document.getElementById('img1');obj.src = 't1.jpg';}</script></head><body style="font-size:24px;"><div id="d1"><div id="d2">菜单</div><div id="d3"><ul><li><span onclick="doAction(1);">menu1</span></li><ul id="u1" style="display:none;"><li><a href="#">item1</a></li><li><a href="#">item1</a></li></ul><li><span onclick="doAction(2);">menu2</span></li><ul id="u2" style="display:none;"><li><a href="#">item1</a></li><li><a href="#">item1</a></li></ul></ul></div></div><img src="t2.jpg" id="img1"/><a href="javascript:;" onclick="change();">换一个</a></body></html>