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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
详解vue 2.6 中 slot 的新用法
Jul 09 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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/03/19 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP面向对象概念
2011/11/06 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php微信开发自定义菜单
2016/08/27 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
js上传图片及预览功能实例分析
2015/04/24 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
跟老齐学Python之print详解
2014/09/28 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python的else子句使用指南
2016/02/27 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python文件拆分与重组实例
2018/12/10 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
python实现计算器简易版
2020/12/17 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
护士自我鉴定范文
2013/10/06 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
初中学生操行评语
2014/12/26 职场文书
新学期主题班会
2015/08/17 职场文书
小学数学国培研修日志
2015/11/13 职场文书
Mysql排序的特性详情
2021/11/01 MySQL