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 相关文章推荐
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
vue-iview动态新增和删除的方法
Jun 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
我常用的几个类
2006/10/09 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
JQuery小知识
2010/10/15 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
jquery等待效果示例
2014/05/01 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
wxpython绘制圆角窗体
2019/11/18 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
keras K.function获取某层的输出操作
2020/06/29 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
Python用户自定义异常的实现
2020/12/25 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
七一党建活动方案
2014/01/28 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
离婚协议书样本
2015/01/26 职场文书
五一劳动节活动总结
2015/02/09 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
2019年思想汇报
2019/06/20 职场文书