这篇文章介绍了jQuery点击弹出下拉菜单的小例子
有需要的朋友可以参考一下
复制代码 代码如下:
<title>导航——点击弹出内容</title>
<style type="text/css">
navgation{margin:;padding:;liststyletype:none;position:relative;}
navgation li {float:left;}
navgation a{padding:px px;backgroundcolor:orange;color:white;textdecoration:none;float:left;height:px;}
navgation a:hover {backgroundcolor:white;color:blue;textdecoration:underline;}
navgation div{display:none;position:absolute;top:px;}
</style>
<script src="Jqueryjs" type="text/javascript"></script>
<script type="text/javascript">
$(document)ready(function () {
$("navgation input")each(function () {
var this_div = $("navgation div");
var _inx = $("navgation input")index(this);
$(this)click(
function () { this_diveq(_inx)slideToggle(); }
function () { this_diveq(_inx)slideToggle(); }
);
});
});
</script>
</head>
<body>
<form id="form" runat="server">
<div>
<ul class="navgation">
<li><input type="button" id="button" value="链接"/>
<div>这里放下拉内容</div>
</li>
<li><input type="button" id="button" value="链接"/>
<div>这里放下拉内容</div>
</li>
<li><input type="button" id="button" value="链接"/>
<div>这里放下拉内容</div>
</li>
<li><input type="button" id="button" value="链接"/>
<div>这里放下拉内容</div>
</li>
<li><input type="button" id="button" value="链接"/>
<div>这里放下拉内容</div>
</li>
</ul>
</div>
</form>
</body>
