jQuery点击弹出下拉菜单的小例子
2013-08-01 00:00
851 查看
<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>
相关文章推荐
- jQuery点击弹出下拉菜单的小例子
- jQuery点击弹出下拉菜单
- jQuery点击弹出下拉菜单
- 点击后慢慢弹出下拉菜单效果代码(栏目管理常用)
- jquery 打开网页自动弹出遮罩层或点击弹出遮罩层
- 做一个弹出视图框的例子,点击一个按钮,弹出一个视图框[转]
- Jquery 点击图片在弹出层显示大图
- Jquery鼠标右键点击弹出菜单
- android使用PopupWindow实现页面点击顶部弹出下拉菜单
- Jquery 点击图片在弹出层显示大图
- jquery 点击弹出层自身以外的任意位置,关闭弹出层
- jquery实现点击弹出层效果的简单实例
- jQuery点击弹出层,弹出模态框,点击模态框消失
- 基于jQuery实现点击弹出层实例代码
- 分享一个JQuery写的点击上下滚动的小例子
- 点击弹出层ajax php jquery 发送表单
- android利用PopupWindow实现点击工具栏弹出下拉菜单
- jQuery 学习笔记3 点击弹出一个div并允许拖拽移动
- 【android开发】使用PopupWindow实现页面点击顶部弹出下拉菜单