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

zl程序教程

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

当前栏目

js实现收缩菜单效果实例代码

JS实例代码 实现 效果 菜单 收缩
2023-06-13 09:15:07 时间

废话不多说,直接上代码:有注释

复制代码代码如下:


<head>
   <title></title>
   <styletype="text/css">
       div
       {
           border:1pxsolidblack;
           width:100px;
       }
       ul.tit,.content
       {
           list-style-type:none;
       }
       .menu
       {
           padding:0px;
           margin:0px;
       }
       .tit
       {
           background-color:#0094ff;
           color:White;
           padding:2px10px;
           cursor:pointer;
       }
   </style>
   <scriptsrc="js/jquery-1.9.0.js"type="text/javascript"></script>
   <scripttype="text/javascript">
       $(function(){
           //一开始直接隐藏菜单
           $(".content").hide();
           //给标题添加点击事件
           $(".tit").click(function(){
               //当点击的时候,打开菜单,同时其他的菜单隐藏
               $(this).next().slideDown().parent().siblings().children(".content").slideUp();
           }).first().next().slideDown();//默认之后第一个菜单打开
       });
   </script>
</head>
<body>
   <div>
       <ulclass="menu">
           <liclass="tit">菜单1</li>
           <liclass="content">
               <ul>
                   <li>11111</li>
                   <li>11111</li>
                   <li>11111</li>
                   <li>11111</li>
               </ul>
           </li>
       </ul>
       <ulclass="menu">
           <liclass="tit">菜单2</li>
           <liclass="content">
               <ul>
                   <li>22222</li>
                   <li>22222</li>
                   <li>22222</li>
                   <li>22222</li>
               </ul>
           </li>
       </ul>
       <ulclass="menu">
           <liclass="tit">菜单3</li>
           <liclass="content">
               <ul>
                   <li>22222</li>
                   <li>22222</li>
                   <li>22222</li>
                   <li>22222</li>
               </ul>
           </li>
       </ul>
   </div>
</body>

相关文章