熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery點擊彈出下拉菜單

2013-11-15 12:09:36  來源: JSP教程 

  <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>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20418.html
  • 上一篇文章:

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.