jquery实现选中单选按钮下拉伸缩效果

本文实例讲述了jquery实现选中单选按钮下拉伸缩效果的方法。分享给大家供大家参考。具体如下：

这是一个使用jQuery插件实现的伸缩效果，在网页上，单击单选按钮，也就是Radio元素后，所属的对应内容向下拉出，伸展开来，平时是不显示的，可用在发票打印快递单查询等场合。

运行效果如下图所示：

具体代码如下：

body,ul,li,h1,h2,h3{margin:0px; padding:0;}
li{list-style:none;}
.m-collapsed, .m-expanded{margin-bottom: 20px;}
.m-collapsed div{display: none;}
.m-collapsed h3{background-color: #F1F1F1; color: #FF3399; cursor: pointer; font-size: 16px; height: 30px; line-height: 30px; padding-left: 20px;}
.m-collapsed h3 span{color: #333333; font-size: 14px; font-weight: normal; padding-left: 20px;}
.m-expanded{border: 1px solid #F691C3; padding: 10px 20px 20px;}
.m-expanded h3{color: #FF3399; cursor: pointer; font-size: 16px; margin-bottom: 20px;}
.m-expanded h3 span{display: none;}




下拉伸缩效果带复选框


 

    索要发票
  
   
    发票抬头： 
    
    个人
     
    
    单位
     
   
    
    单位名称：
    
     
   
   
    发票内容：
    
    明细
    服装服饰
    办公用品
    
   
   
    
   
   
  
  
 

希望本文所述对大家的jquery程序设计有所帮助。