jq 手风琴（淡入淡出）

来源：互联网发布：《申报》数据库编辑：程序博客网时间：2024/05/17 23:43

点击打开链接

<body>
       <ul>
           <li>
               <div>员工管理</div>
               <ul class="menu">
                   <li>员工1</li>
                   <li>员工2</li>
               </ul>
           </li>
           <li>
               <div>部门信息</div>
               <ul class="menu">
                   <li>部门1</li>
                   <li>部门2</li>
               </ul>
           </li>
           <li>
               <div>生产管理</div>
               <ul class="menu">
                   <li>生产1</li>
                   <li>生产2</li>
               </ul>
           </li>
       </ul>
   </body>
   <script src="js/js/jquery-1.12.4.min.js"></script>
   <script src="js/js/jquery.easing.1.3.js"></script>
   <script>
       $('.menu').css('display','none');//选择类名为menu的标签添加样式
       $('.menu:first').css('display','block');//选择类名为menu的第一个标签添加样式

       //给div添加点击事件
       $('div').on('click',function(){
           var ul=$($(this).siblings()[0]);//除了div以外的第一个标签
//           if(ul.css('display')=='none'){
//               ul.css('display','block').show(2000);
//           }
//           else if(ul.css('display')=='block'){
//               ul.css('display','none').show(2000);
//           }
//           else{
//               ul.css('display','none').show(2000);
//           }

//           if(this.isClose||this.isClose==undefined){
//               this.isClose=false;//打开
//               $($(this).siblings()[0]).show(2000,function(){
//                   console.log('显示完成');
//               });
//           }
//           else{
//               this.isClose=true;//关闭
//               $($(this).siblings()[0]).hide('slow',function(){
//                   console.log('关闭完成');
//               });
//           }
           //这一句直接代替上面的一大堆！
           //滑入滑出
           //$($(this).siblings()[0]).slideToggle('slow');

           //淡入淡出
           //$($(this).siblings()[0]).fadeToggle('slow');//淡入淡出结合
           if(ul.css('display')=='none'){
               ul.fadeIn('slow');//淡入
               ul.css('display','block');

           }
           else if(ul.css('display')=='block'){
               ul.fadeOut('slow');//淡入
               ul.css('display','none');

           }

           //$($(this).siblings()[0]).fadeOut('slow');//淡出
       });
   </script>

阅读全文

0 0