15年软件开发经验,只做源码定制!

原创设计定制开发

满足您的个性化需求

当前位置：首页前端开发 H5

表单点击滑动下拉框美化 html 下拉美化

孙正萌| 发布于 2022-05-26 17:15:22| 625阅读| 0点赞| 0评论

页面多下拉美化

<dl class="select">
		<dt>下拉dt>
		<dd>
			<ul>
				<li><a href="#">12131a>li>
				<li><a href="#">下拉2a>li>
				<li><a href="#">下拉3a>li>
				<li><a href="#">下拉4a>li>
				<li><a href="#">下拉5a>li>
				<li><a href="#">下拉6a>li>
			ul>
		dd>
	dl>

需先引入jquery库

<script type="text/javascript">
$(function(){
	$(".select").each(function(){
		var s=$(this);
		var z=parseInt(s.css("z-index"));
		var dt=$(this).children("dt");
		var dd=$(this).children("dd");
		var _show=function(){dd.slideDown(200);dt.addClass("cur");s.css("z-index",z+1);};   //展开效果
		var _hide=function(){dd.slideUp(200);dt.removeClass("cur");s.css("z-index",z);};    //关闭效果
		dt.click(function(){dd.is(":hidden")?_show():_hide();});
		dd.find("a").click(function(){dt.html($(this).html());_hide();});     //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
		$("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";});
	})
})
script>