JQuery 下拉框滑动效果

1.HTML下拉框代码（部分代码，仅供参考！）

					<li>
                        <label class="bt">下拉框名称<img id="bg2" src="/Static/images/SmartShow/bg2.png" /></label>
                        <div id="PurchaseIdentity" class="dl dl1 dl2">
                            <div>
                                <input id="check17" type="radio" name="PurchaseIdentity" value="内容1"><label for="check17">内容1</label>
                            </div>
                            <div>
                                <input id="check18" type="radio" name="PurchaseIdentity" value="内容2"><label for="check18">内容2</label>
                            </div>
                            <div>
                                <input id="check19" type="radio" name="PurchaseIdentity" value="内容3"><label for="check19">内容3</label>
                            </div>
                            <div>
                                <input id="check20" type="radio" name="PurchaseIdentity" value="内容4"><label for="check20">内容4</label>
                            </div>
                            <p class="clear"></p>
                            <a class="Okradio" href="javascript:;">确定</a>
                        </div>
                        <span id="msgCategory" style="color: red;"></span>
                        <div class="clear"></div>
                    </li>

2.CSS样式

.bt {border-bottom: 1px solid #07d5de;}
#UnitProperty {position: absolute;height: 500px;overflow: auto;width: 100%; top: 0.35rem; left: 0rem;background-color: #438EDB;padding: 0.2rem;color: #333;z-index: 4; font-size: 0.24rem;display: none;}

3.JS代码

$(function () {
    //点击单选图片，显示出下拉框信息
	$(document).ready(function () {
	    $("#bg2").click(function () {
	        $("#UnitProperty").slideToggle("slow");
	    });
	});
	
	//点击确定，在下方将选中的内容显示在页面上
	$('.Okradio').click(function () {

	    var qObj = $(this).parent('div .dl').hide();
		
			qObj.parent('li').next('.last2').html('');
		var qLen=qObj.find('input:checked').length;      //单选框选中
		
		if(qLen>0){
			var qHtml='';
			qObj.children('div').each(function(i,item){
				if($(item).children('input').is(':checked')){
				    qHtml += '<div><input type="checkbox" checked="checked" name="activity"><label>' + $(item).children('label').text() + '</label></div>';
				}
			});
			qHtml+='<p class="clear"></p>';
			qObj.parent('li').next('.last2').append(qHtml).show();
		}else{
			qObj.parent('li').next('.last2').hide();
		}


		if($('.last3').html()!=''){
			$('.last3').prev('li').removeClass('bn');
		}else{
			$('.last3').prev('li').addClass('bn');
		}

		$('div.bg').hide();
		qObj.hide();
		return false;
		
	});	
})