十大网站建设品牌,南昌 网站建设,网站建设备案策划书,网站建设整体方案前提
因为html的select标签#xff0c;下拉框自定义程度非常的低#xff0c;为了贴合而项目ui显示#xff0c;所以打算自制下拉框
代码
html
div classpos-reldiv idselect classselect get-selectspan class下拉框自定义程度非常的低为了贴合而项目ui显示所以打算自制下拉框
代码
html
div classpos-reldiv idselect classselect get-selectspan classget-langPortuguese/spanimg src./img/down_arrow.webp width14px height14px altdown_arrow/divdiv classm-b-10ul idoptions classget-option my-hiddenli classmy-li english onclickchangeSelect(1)English/lili classmy-li portuguese onclickchangeSelect(2)Portuguese/li/ul/div
/divcss
.pos-rel {position: relative
}.pos-abs {position: absolute;top: 20px
}.my-show {opacity: inherit !important;visibility: inherit !important;width: 150px !important;text-align: center;left: -45px !important;top: 70px !important;background-color: #fff !important;transition: inherit !important;animation-name: dropdown-animation !important;animation-duration: .3s !important;animation-fill-mode: forwards !important
}.my-hidden {opacity: 0 !important;visibility: hidden !important;display: none !important
}
.select {outline: 0;border: 0;color: #263a4f;font-size: 14px;font-weight: 600;line-height: 80px;cursor: pointer
}
.my-li {border-bottom: 0 !important;color: #009aab !important;padding: 10px !important;cursor: pointer;border: #009aab1a 1px solid !important
}.my-li:hover {border-bottom: 0 !important;color: #fff !important;padding: 10px !important;cursor: pointer;background-color: #009aab !important;border: #009aab1a 1px solid !important
}js function changeSelect(lang) {if (lang 1 ) {changeSelectLanguage(English);} else if (lang 2 ) {changeSelectLanguage(Portuguese); }
}//isexcist
function hasClass(ele, cls) {return ele.className.match(new RegExp((\\s|^) cls (\\s|$)));
}
// //add
function addClass(ele, cls) {if (!hasClass(ele, cls)) ele.className cls;
}
// //remove
function removeClass(ele, cls) {if (hasClass(ele, cls)) {var reg new RegExp((\\s|^) cls (\\s|$));ele.className ele.className.replace(reg, );}
}
// two language
function languageButton() {var options document.getElementsByClassName(get-option)[0];var options1 document.getElementsByClassName(get-option)[1];document.getElementsByClassName(get-select)[0].onclick function (e) {if (hasClass(options, my-show)) {removeClass(options, my-show);addClass(options, my-hidden);} else {addClass(options, my-show);removeClass(options, my-hidden);}e.stopPropagation();}document.getElementsByClassName(get-select)[1].onclick function (e) {if (hasClass(options1, my-show)) {removeClass(options1, my-show);addClass(options1, my-hidden);} else {addClass(options1, my-show);removeClass(options1, my-hidden);}e.stopPropagation();}$(document).on(click, function () {if (hasClass(options, my-show)) {removeClass(options, my-show);addClass(options, my-hidden);}if (hasClass(options1, my-show)) {removeClass(options1, my-show);addClass(options1, my-hidden);}})
}
//language down
function changeSelectLanguage(inner) {let langArr document.getElementsByClassName(get-lang);for (let i 0; i langArr.length; i) {langArr[i].innerHTML inner;}
}
window.onload function () {languageButton();
}
