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

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

运行效果如下图所示：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title下拉伸缩效果/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/脚本样式类型=' text/CSS ' body，ul，li，h1，h2，h3 { margin:0px划水：0;}李{列表式：无；}.间位崩溃了m .展开{页边距-底部： 20px}.间位折叠的div { display: none}。间位折叠h3 {背景色-color : # f1 f1；color: # FF3399cursor:指针；font-size : 16px高度： 30px线高： 30px左填充left: 20px}。间位折叠H3 span { color : # 333333 font-size : 14px；字体粗细：正常；左填充left: 20px}。间位膨胀{border: 1px固体# f691 C3 adding : 10px 20px 20px }。间位扩展H3 { color : # ff 3399 cursor :指针；font-size : 16px边距-底部： 20px}.间位展开h3 span { display: none}/style脚本类型=' text/JavaScript ' $(文档)。ready(function(){ var $ tree _ Li=$(' ul。树李H3’)$树李。单击(function(){ var index=$ tree _ Li。索引(这个)；var $div=$('ul.tree li h3 ').eq(指数)。下一个(“div”)；if($ div。是(' :可见'){ $(this).父项()。attr('class '，' m-collapsed ')；$ div。hide()；$(这个)。查找(' input[type='checkbox']').removeAttr(“”选中','选中');}else{ $(this).父项()。attr('class '，' m-expanded ')；$ div。show()；$(这个)。查找(' input[type='checkbox']').attr('checked '，' checked ')；}返回false})})/脚本/head dyh 1下拉伸缩效果带复选框/h1 div ul class=' tree ' Li class=' m-collapsed ' h3input name=' type=' checkbox ' value=' '/索要发票/H3 div class=' mt20 ' div style=' height :116 px ' class=' pop-red-content no border ' div class=' mt5 receive-option ' span发票抬头：/span span输入类型=' radio ' checked=' checked ' value=' P ' name=' radio-title ' id=' title-P ' 标签类=' ml5 '表示=' title-P '个人/label /span span class='ml20 '输入类型='收音机'值='C '名称=' radio-title ' id=' title-g ' label class=' ml5 ' for=' title-g '单位/label/span/div class=' mt10 gname clear fix ' div id=' div 1 ' label class=' fl ' for=' g-name '单位名称：/标签输入类型=' text ' maxlength=' 50 ' name=' g-name ' id=' g-name ' style=' width :200 px； 高度：21px线高：21 pxspan class=' ml5 lower '/span/div/div class=' mt10 receive-option clear fix ' label class=' fl ' for=' receive-cata '发票内容：/label select id=' drpinvoice type ' name=' drpinvoice type '选项值=' '明细/option选项值='FS '服装服饰/option选项值='BG '办公用品/option/select/div class=' ml60 mt10 '输入类型='提交'值='提交/div /div /li /ul/div/body/html希望本文所述对大家的jquery程序设计有所帮助。