提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery点击弹出下拉菜单的小例子

jQuery 例子 点击 下拉菜单
2023-06-13 09:15:03 时间
复制代码代码如下:

<title>导航——点击弹出内容</title>
   <styletype="text/css">
.navgation{margin:0;padding:0;list-style-type:none;position:relative;}
.navgationli{float:left;}
.navgationa{padding:3px6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}
.navgationa:hover{background-color:white;color:blue;text-decoration:underline;}
.navgationdiv{display:none;position:absolute;top:30px;}
</style>
   <scriptsrc="Jquery1.7.js"type="text/javascript"></script>
   <scripttype="text/javascript">
       $(document).ready(function(){
           $(".navgationinput").each(function(){
               varthis_div=$(".navgationdiv");
               var_inx=$(".navgationinput").index(this);
               $(this).click(
               function(){this_div.eq(_inx).slideToggle();},
               function(){this_div.eq(_inx).slideToggle();}
          );
           });
       });
   </script>
</head>
<body>
   <formid="form1"runat="server">
   <div>
       <ulclass="navgation">
           <li><inputtype="button"id="button"value="链接1"/>
           <div>这里放下拉内容1</div>
           </li>
           <li><inputtype="button"id="button1"value="链接2"/>
           <div>这里放下拉内容2</div>
           </li>
           <li><inputtype="button"id="button2"value="链接3"/>
           <div>这里放下拉内容3</div>
           </li>
           <li><inputtype="button"id="button3"value="链接4"/>
           <div>这里放下拉内容4</div>
           </li>
           <li><inputtype="button"id="button4"value="链接5"/>
           <div>这里放下拉内容5</div>
           </li>
       </ul>
   </div>
   </form>
</body>

相关文章