您的位置：首页 > Web前端 > JQuery

jQuery点击弹出下拉菜单

2012-03-13 21:35 288 查看

<title>导航——点击弹出内容</title>

<style type="text/css">

.navgation{margin:0;padding:0;list-style-type:none;position:relative;}

.navgation li {float:left;}

.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}

.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}

.navgation div{display:none;position:absolute;top:30px;}

</style>

<script src="Jquery1.7.js" 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_div.eq(_inx).slideToggle(); },

function () { this_div.eq(_inx).slideToggle(); }

);

});

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<ul class="navgation">

<li><input type="button" id="button" value="链接1"/>

<div>这里放下拉内容1</div>

</li>

<li><input type="button" id="button1" value="链接2"/>

<div>这里放下拉内容2</div>

</li>

<li><input type="button" id="button2" value="链接3"/>

<div>这里放下拉内容3</div>

</li>

<li><input type="button" id="button3" value="链接4"/>

<div>这里放下拉内容4</div>

</li>

<li><input type="button" id="button4" value="链接5"/>

<div>这里放下拉内容5</div>

</li>

</ul>

</div>

</form>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航