本篇文章主要介绍html+css+js下拉列表小三角,感兴趣的朋友参考下,希望对大家有所帮助。
gadf
.zijisanjiclass{
width: 220px;
border: 1px solid rgba(0,0,0,.15);
background-color: #fff;
padding: 10px;
top :0px;
position: absolute;
}
.datepicker-select-dropdown.datepicker-select-orient-top:before {
bottom: -7px;
left: 6px;
border-bottom: 0;
border-top: 7px solid rgba(0,0,0,.15);
}
.datepicker-select-dropdown:before {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(0,0,0,.15);
border-bottom-color: rgba(0,0,0,.2);
}
.datepicker-select-dropdown:after, .datepicker-select-dropdown:before {
content: '';
display: inline-block;
border-top: 0;
position: absolute;
}
.datepicker-select-dropdown.datepicker-select-orient-top:after {
bottom: -6px;
left: 7px;
border-bottom: 0;
border-top: 6px solid #fff;
}
.datepicker-select-dropdown:after {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
}
.datepicker-select-dropdown.datepicker-select-orient-bottom:after {
top: -6px;
}
.datepicker-select-dropdown.datepicker-select-orient-bottom:before {
top: -7px;
}
.form .form-bordered .form-group>p {
border-left: 1px solid #efefef;
}
.form .form-bordered .form-group {
margin: 0;
border-bottom: 1px solid #efefef;
}
首页
ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作
男
女
其他
博士
硕士
本科
专科
高中
中专
初中
小学
Search
Reset
年
请选择
请选择
请选择
请选择
请选择
请选择
请选择
请选择
请选择
请选择
月
请选择
请选择
请选择
请选择
请选择
请选择
日
请选择
请选择
请选择
请选择
请选择
确定
jQuery(document).ready(function(){
$("#userBirthdayid").focus(function(){
//var offset = ponent ? ponent.parent().offset() : this.element.offset();
var offset = $(this).offset();
console.info(offset);
var paddingTop = $("#zijixiede").css('padding-top');
console.info(paddingTop);
var height = $(this).outerHeight(false);
console.info(height);
var width = $(this).outerWidth(false);
console.info(width);
var scrollTop = $(document).scrollTop();
console.info(scrollTop);
var outerHeight = $("#zijixiede").outerHeight();
console.info(outerHeight);
var top_overflow = -scrollTop + offset.top - outerHeight;
console.info(top_overflow);
var yorient = top_overflow < 0 ? 'bottom' : 'top';
$("#zijixiede").addClass('datepicker-select-orient-' + yorient);
var top = offset.top;
if (yorient === 'top')
top -= outerHeight + parseInt(paddingTop);
else
top += height;
var left = offset.left;
console.info(left);
$("#zijixiede").css({
top: top,
left: left
});
$("#zijixiede").show();
});
$(document).mousedown(function(e){
if(!($("#zijixiede").find(e.target).length)&&!($("#userBirthdayid").is(e.target)))
$("#zijixiede").hide();
});
$(".quedingbtn").click(function(){
console.info("拉克建档立卡京东方拉克");
//return false;
});
});
相关推荐:
如果觉得《html 小三角折叠菜单 html+css+js下拉列表小三角》对你有帮助,请点赞、收藏,并留下你的观点哦!