jquery制作滑动面板-阿里云开发者社区

jquery制作滑动面板

2017-11-23 1092

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

项目开发中，我们有时候需要点击某个按钮出现一个面板，在面板上有我们需要的一些操作，或者是图片。ok！如下简单制作滑动面板效果:

 
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
         <
         html 
         xmlns
         =
         "http://www.w3.org/1999/xhtml"
         > 
        
         <
         head
         > 
        
         <
         meta 
         http-equiv
         =
         "Content-Type" 
         content
         =
         "text/html; charset=gb2312" 
         /> 
        
         <
         title
         >无标题文档</
         title
         > 
        
         <
         script 
         type
         =
         "text/javascript" 
         src
         =
         "jQuery/jquery-1.6.2.js"
         ></
         script
         > 
        
         <
         script 
         type
         =
         "text/javascript"
         > 
        
         $(document).ready(function(){ 
        
         $(".box a").click(function(){ 
        
         /*slideToggle()这个方法，如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。*/ 
        
         $(".one").slideToggle(); 
        
         /* 
        
         oggleClass() 对设置或移除被选元素的一个或多个类进行切换。 
        
         该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。 
        
         */ 
        
         $(this).toggleClass("active"); 
        
         }); 
        
         $(".box p").hover(function(){ 
        
         $(this).toggleClass("hover") 
        
         }); 
        
         }); 
        
         </
         script
         > 
        
         <
         style 
         type
         =
         "text/css"
         > 
        
         *{padding:0;margin:0;}
        
         body{font-size:12px;}
        
         a{text-decoration:none;color:#000066;font-family:"宋体";}
        
         .box{width:500px;margin:0 auto;}
        
         .one{height:200px;background:url(images/2.png) no-repeat ;display:none;}
        
         .box p{border-top:5px solid #333333;background:url(images/1.png) no-repeat top;}
        
         /*将行内元素A写的和图片长度和高度差不多*/
        
         .box p a{display:block;width:140px;height:40;line-height:40px;background:url(images/3.png) no-repeat right 10px;  text-align:center;margin:0 auto;font-size:14px;font-weight:bolder;padding-right:10px;}
        
         /*注册一个新的class，当我们点击这个a时，将这个注册号的class添加到a中*/
        
         .box p a.active{background:url(images/4.png) no-repeat right 12px;}
        
         .box p.hover{background:url(images/5.png) no-repeat top}
        
         </
         style
         > 
        
         </
         head
         > 
        
         <
         body
         > 
        
         <
         div 
         class
         =
         "box"
         > 
        
         <
         div 
         class
         =
         "one"
         ></
         div
         > 
        
         <
         p
         > <
         a 
         href
         =
         "#"
         >点 击</
         a
         ></
         p
         > 
        
         </
         div
         > 
        
         </
         body
         > 
        
         </
         html
         >