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

原创设计 定制开发

满足您的个性化需求

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

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

孙正萌| 发布于 2022-05-26 17:15:22| 455阅读| 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>


0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

孙正萌
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部