点击下拉菜单不懂，求聪明人-JavaSript-爱易网页

点击下拉菜单不懂，求聪明人

日期：2014-05-16　浏览次数：20369 次

点击下拉菜单不懂，求智者！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

</head>



<style>

*{

	margin:0px; padding:0px;

}

body{

	font-size:12px;

}

ul,li{

	list-style-type:none;

}

#menu{

	margin:50px auto; width:500px;

}

#menu ul li{

	float:left; border:1px solid #dddddd; margin-right:20px; padding:0px 5px; position:relative;

}

#menu ul li h3{

	height:24px; line-height:24px; border-bottom:1px solid #dddddd; cursor:pointer

}

#menu ul li div{

display:none

}

</style>

<body>





<div id="menu">

<ul>

<li>

<h3>导航1</h3>

<div>111111</div>

</li>



<li>

<h3>导航2</h3>

<div>2222222</div>

</li>



<li>

<h3>导航3</h3>

<div>33333333</div>

</li>



<li>

<h3>导航4</h3>

<div>444444444</div>

</li>



</ul>

</div>



</body>

</html>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

小弟不懂js，求高手帮我写一段js:

鼠标点击 #menu ul li h3 标签时，#menu ul li div 显示，鼠标移出 #menu ul li时隐藏 #menu ul li div
------解决方案--------------------

window.onload=function()

{

	var oMenu=document.getElementById('menu');

	var aLi=oMenu.getElementsByTagName('li');

	for(var i=0;i<aLi.length;i++)

	{

		var oH3=aLi[i].getElementsByTagName('H3')[0];

		oH3.onclick=function()

		{

			this.parentNode.getElementsByTagName('div')[0].style.display='block';

		}

		aLi[i].onmouseout=function()

		{

			this.getElementsByTagName('div')[0].style.display='none';

		}

	}

}

------解决方案--------------------

     $(function () {

         $('#menu h3').click(function () { $(this).next('div').show() });

         $('#menu li').mouseleave(function () { $(this).find('div').hide()});

     });

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

点击下拉菜单不懂，求聪明人

相关资料更多>

推荐阅读更多>