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


Posted in Javascript onAugust 06, 2015

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

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

运行效果如下图所示:

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

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

具体代码如下:

<!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=utf-8" />
<title>下拉伸缩效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
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;}
</style>
<script type="text/javascript">
$(document).ready(function(){
   var $tree_li = $("ul.tree li > h3")
   $tree_li.click(function(){   
    var index = $tree_li.index(this);
    var $div = $("ul.tree li h3").eq(index).next("div");  
    if($div.is(":visible")){
      $(this).parent().attr("class","m-collapsed");
      $div.hide();
      $(this).find("input[type='checkbox']").removeAttr("checked","checked");
    }else{
      $(this).parent().attr("class","m-expanded");
      $div.show();
      $(this).find("input[type='checkbox']").attr("checked","checked");
    }
  return false;
   })
 })
</script>
</head>
<body>
<h1>下拉伸缩效果带复选框</h1>
<div >
<ul class="tree">
 <li class="m-collapsed">
  <h3><input name="" type="checkbox" value="" />  索要发票</h3>
  <div class="mt20">
   <div style="height:116px" class="pop-red-content noborder">
   <div class="mt5 receipt-option"> <span>发票抬头:</span> <span>
    <input type="radio" checked="checked" value="P" name="radio-title" id="title-p">
    <label class="ml5" for="title-p">个人</label>
    </span> <span class="ml20">
    <input type="radio" value="C" name="radio-title" id="title-g">
    <label class="ml5" for="title-g">单位</label>
    </span> </div>
   <div class="mt10 gname clearfix">
    <div id="div1">
    <label class="fl" for="g-name">单位名称:</label>
    <input type="text" maxlength="50" name="g-name" id="g-name" style="width:200px; height:21px; line-height:21px;">
    <span class="ml5 lower "></span> </div>
   </div>
   <div class="mt10 receipt-option clearfix">
    <label class="fl" for="receipt-cata">发票内容:</label>
    <select id="drpInvoiceType" name="drpInvoiceType">
    <option value="">明细</option>
    <option value="FS">服装服饰</option>
    <option value="BG">办公用品</option>
    </select>
   </div>
   <div class="ml60 mt10">
    <input type="submit" value="提交">
   </div>
   </div>
  </div>
  </li>
 </ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
js实现网页抽奖实例
Aug 05 #Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 #Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 #Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 #Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 #Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 #Javascript
JS绘制生成花瓣效果的方法
Aug 05 #Javascript
You might like
php你的验证码安全码?
2007/01/02 PHP
php 生成文字png图片的代码
2011/04/17 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
jquery radio 操作代码
2011/03/16 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
JS弹出窗口插件zDialog简单用法示例
2016/06/12 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python安装与使用redis的方法
2016/04/19 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python中scikit-learn机器代码实例
2018/08/05 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
单位租房协议书范本
2014/12/04 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
nginx配置之并发频次限制
2022/04/18 Servers