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 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
vue的token刷新处理的方法
Jul 17 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的栏目导航程序
2006/10/09 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP7 list() 函数修改
2021/03/09 PHP
js实现日期级联效果
2014/01/23 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
python中bisect模块用法实例
2014/09/25 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python单链表简单实现代码
2016/04/27 Python
Python3中的json模块使用详解
2018/05/05 Python
python 自动重连wifi windows的方法
2018/12/18 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
医院门卫岗位职责
2013/12/30 职场文书
小学开学典礼主持词
2014/03/19 职场文书
村干部承诺书
2014/03/28 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
思想工作总结范文
2015/08/12 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书