jquery下拉菜单效果 jquery点击弹出下拉菜单的例子
发布时间：2015-11-11 编辑：jiaochengji.com
如何用jquery实现点击即弹出下拉菜单的效果呢？这里分享一段简洁的jquery代码，大家学习下实现这个效果的方法。
jquery点击弹出下拉菜单的例子。
代码：
<html> <title>导航-点击弹出内容-下拉菜单-www.jbxue.com</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>脚本学堂，欢迎你!</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> </html>您可能感兴趣的文章：
jquery下拉菜单效果 jquery点击弹出下拉菜单的例子
Click Menu
jQuery菜单插件 Smooth Navigational Menu
Mega Drop Down Menus
jquery 动态菜单的实现代码分享
Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
jquery下拉菜单 ul标签下拉菜单的例子
导航菜单-左则多层树形下拉菜单
Jquery 下拉菜单的实现代码一例
7款风格新颖的jQuery/CSS3菜单导航分享
[关闭]