div自定义下拉框组件

因为原生的下拉框不能修改其属性，很难美化下拉框。

所以自己用div简单自定义了一下下拉框，想美化直接修改css即可

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>div模仿下拉框</title>
<style>
*{padding: 0;margin: 0;
}
.select-box{width: 200px;margin: 50px auto;text-align: left;text-indent: 5px;/* border: 1px solid #ccc; */padding: 10px;
}
.select-box .select-title{height: 30px;line-height: 30px;display: block;margin-bottom: 10px;border: 1px solid #ccc;padding: 5px 10px;cursor:pointer;
}
.select-box ul{border: 1px solid #ccc;
}
.select-box ul li{height: 30px;line-height: 30px;list-style: none;padding: 5px 10px;cursor: pointer;
}
.select-box ul li.current{background: #ebebeb;
}
.select-box ul li:not(:last-of-type){border-bottom: 1px solid #ccc;
}
.none{display: none;
}
.block{display: block;
}
</style>
</head>
<body><div class="select-box"><span class="select-title">web前端</span><!-- 下拉标题 --><ul class="select-con none"><li>web前端</li><li>php</li><li>java</li><li>ios</li><li>安卓</li></ul></div>
<script src="jquery-3.0.0.min.js"></script>
<script>$(document).bind("click",function(e){var clickMe=$(e.target);/*获取点击元素*/

　　　　　　if(!clickMe.hasClass("select-title")){/*点击元素不是下拉框标题时*/
　　　　　　　　$(".select-box ul").addClass("none").removeClass("block");
　　　　　　　　if(clickMe.parent().hasClass("select-con")){/*点击元素是下拉选项时*/
　　　　　　　　　　var currenLiHtml=clickMe.html();/*获取点击的下拉选项HTML*/
　　　　　　　　　　clickMe.parent().siblings(".select-title").html(currenLiHtml);/*把点击的下拉选项HTML放到下拉标题*/
　　　　　　　　　　clickMe.addClass("current").siblings().removeClass("current");/*给点击的下拉选项加背景色*/
　　　　　　　　}
　　　　　　}else if(clickMe.siblings(".select-con").hasClass("none")){/*点击下拉标题时如果有none类的话*/
　　　　　　　　clickMe.parents("body").find(".select-con").addClass("none").removeClass("block");/*点击下拉标题时如果有none类的话,全部下拉关闭，然后在展开当前的下拉*/
　　　　　　　　clickMe.siblings(".select-con").addClass("block").removeClass("none");

　　　　　　　　}else if(clickMe.siblings(".select-con").hasClass("block")){/*点击下拉标题时如果有block类下拉是展开的话*/
　　　　　　　　$(".select-box ul").addClass("none").removeClass("block");
　　　　}

})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/zzwlong/p/6076573.html

div自定义下拉框组件相关推荐

【EasyUI篇】Combo自定义下拉框组件
微信公众号:程序yuan 关注可了解更多的教程.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 20.Combo自定义下拉框组件这组件不可以通过class方式进行定义 JSP ...
Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于 ValidateBox(验证框)组件一．加载方式自定义下拉框不能通过标签的方式进行创建. <in ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
可自定义的vue下拉框组件
创建Select.vue组件 //创建Select.vue组件<template><div class="selects"><!-- 选择框 --&g ...
自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
下拉框的value值怎么设置为变量_自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让 ...
文本域自定义下拉框支持模糊检索关键字高亮上下选择
转载自:文本域自定义下拉框支持模糊检索关键字高亮上下选择一.需求需要创建一个常见问题库,填写存在问题时可以下拉选择,可以模糊搜索,也可以手写.如果选择了问题库中的内容,自动填充内容到存在问 ...
css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

div自定义下拉框组件

div自定义下拉框组件相关推荐

最新文章

热门文章