纯css+js自制下拉框
前提
因为html的select标签,下拉框自定义程度非常的低,为了贴合而项目ui显示,所以打算自制下拉框
代码
html
<div class="pos-rel"><div id="select" class="select get-select"><span class="get-lang">Portuguese</span><img src="./img/down_arrow.webp" width="14px" height="14px" alt="down_arrow"></div><div class="m-b-10"><ul id="options" class="get-option my-hidden"><li class="my-li english" onclick="changeSelect(1)">English</li><li class="my-li portuguese" onclick="changeSelect(2)">Portuguese</li></ul></div>
</div>
css
.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();
}
相关文章:
纯css+js自制下拉框
前提 因为html的select标签,下拉框自定义程度非常的低,为了贴合而项目ui显示,所以打算自制下拉框 代码 html <div class"pos-rel"><div id"select" class"select get-select"><span class&…...
uniapp在App端如何动态修改原生导航栏?
uniapp在App端如何动态修改原生导航栏? 文章目录 uniapp在App端如何动态修改原生导航栏?page.json配置修改 buttons 文字修改按钮上的角标设置 searchInput的 focus设置 searchInput的 text 在App端可以通过得到 webview 对象,通过当前 webvi…...
Linux:CPUPower管理器 --- cpufreq解析
一、cpufreq是什么? cpufreq是Linux内核下的一种功率管理框架,它负责改变CPU的频率,以降低功耗并延长电池寿命。该框架的主要机制是动态调整CPU频率,该频率受限于CPU的负载和功耗。cpufreq能够动态地将频率降低到最低值或最高值&a…...
【嵌入式开发问答】不是普通的嵌入式八股
1. 进程、线程、堆栈、溢出 【问:】 进程的堆栈的物理内存是什么时候分配的? 堆栈的大小限制是多大?这个限制可以调整吗? 当堆栈发生溢出后应用程序会发生什么? 【答:】...
面试题-springboot篇-SpringBoot的注解
SpringBootApplication是SpringBoot的最核心的注解。 SpringBootApplication注解在SpringBoot的主类上,标识是SpringBoot应用,用来开启SpringBoot的各项能力。由SpringBootConfiguration、EnableAutoConfiguration、ComponentScan三个注解组成。这三个注…...
BaiChuan2保姆级微调范例
前方干货预警:这可能是你能够找到的,最容易理解,最容易跑通的,适用于各种开源LLM模型的,同时支持多轮和单轮对话数据集的大模型高效微调范例。 我们构造了一个修改大模型自我认知的3轮对话的玩具数据集,使用…...
postgresql参数优化
一 相关参数介绍 1.1 内存参数-shared_buffers shared_buffers:共享缓存区的大小,相当于oracle数据库中的SGA. 一般推荐为内存的四分之一,不超过总内存的二分之一。 该值默认是128M。 1.2 cpu并行参数-max_parallel_workers max_parall…...
【极速发表】2-4区SCI (含CCF),平均录用周期仅2个月,最快11天见刊!
一、计算机科学类SCI (11.30截稿) 【期刊概况】IF:4.0-5.0, JCR2区,中科院3区; 【检索情况】SCI在检,正刊; 【国人占比】10.58%; 【自引率】7.50%; 【年发文量】100篇以下; 【预警情况】无…...
Git 提交规范
遇到的问题 在项目中采用 git 管理代码版本时,突然不能进行提交(git commit)。 报错信息如下: ERROR invalid commit message format. Proper commit message format is required for automated changelog generation. Git 规范…...
[Python进阶] 操纵鼠标:PyAutoGUI
6.4 操纵鼠标:PyAutoGUI 6.4.1 说明 PyAutoGUI是一个Python的GUI自动化工具,它可以让程序自动控制鼠标和键盘的一系列操作。它能够模拟鼠标的移动、点击、拖拽等操作,以及键盘的按键按下和释放等操作。PyAutoGUI还提供了其他功能࿰…...
JavaScript querySelector
querySelector方法的语法: var element document.getElementById("id"); element.querySelector(selector)element是要执行选择操作的父元素,selector是CSS选择器,用于指定要选择的元素。 querySelector方法返回匹配选择器的第一…...
Selenium自动化测试
一、Selenium自动化测试(基于python) 1、Selenium简介: 1.1 Selenium是一款主要用于Web应用程序自动化测试的工具集合。Selenium测试直接运行在浏览器中,本质是通过驱动浏览器,模拟浏览器的操作,比如跳转…...
Lua调用C#类
先创建一个Main脚本作为主入口,挂载到摄像机上 public class Main : MonoBehaviour {// Start is called before the first frame updatevoid Start(){LuaMgr.GetInstance().Init();LuaMgr.GetInstance().DoLuaFile("Main");}// Update is called once p…...
“react“: “^16.14.0“,打开弹窗数据发生变化
“react”: “^16.14.0”, 弹窗 打开弹窗数据发生变化 // 这里对比changeHistoryVisible是否发生改变调用后端方法改变数据componentDidUpdate(prevProps) {if (prevProps.changeHistoryVisible ! this.props.changeHistoryVisible && this.props.changeHistoryVisi…...
MySQL数据库varchar字段求和出现精度丢失
问题描述 在MySQL数据库中,将varchar字段用于数值运算时,会将其转换为数值类型进行计算。然而,由于varchar字段的可变长度特性,可能存在数值精度丢失的问题。 我用varchar类型存储学生的分数,分数有两位小数ÿ…...
C++入门 第二篇( 引用、内联函数、auto关键字、指针空值nullptr)
目录 6. 引用 6.1 引用概念 6.2 引用特性 6.3 常引用 正确用法:权限 缩小/平移 6.4 使用场景 1. 做参数 2. 做返回值 3.传值、传引用效率比较 6.5引用问题举例 6.6 反汇编中的& 6.7 引用和指针的不同点: 7.内联函数 7.1 内联函数与宏对…...
2023年煤气证模拟考试题库及煤气理论考试试题
题库来源:安全生产模拟考试一点通公众号小程序 2023年煤气证模拟考试题库及煤气理论考试试题是由安全生产模拟考试一点通提供,煤气证模拟考试题库是根据煤气最新版教材,煤气大纲整理而成(含2023年煤气证模拟考试题库及煤气理论考…...
嵌入式面试经典30问
嵌入式面试经典30问 很多同学说很害怕面试,看见面试官会露怯,怕自己的知识体系不完整,怕面试官考的问题回答不上了,所以今天为大家准备了嵌入式工程师面试经常遇到的30个经典问题,希望可以帮助大家提前准备࿰…...
C++ 八股文: 构造函数
什么是构造函数 构造函数(Constructor)是一种特殊的成员函数,用于在创建对象时进行初始化。它的作用是确保对象在创建后处于一个合法和可用的状态。构造函数在类定义中声明,其名称与类名相同,但不带返回类型。 写一个…...
自动切割短视频的软件推荐,一键生成1000条短视频,支持六大主流平台矩阵分发,快来免费试用
经过小编的多方测评,今天给大家推荐一款性价比、好评率、专业性全都超高的软件——超级编导批量剪辑软件,更重要的是这款软件支持免费试用,一起来看看超级编导如何帮助大家自动分割视频的吧。 复制视频链接,一键上传视频素材后&am…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
数据结构:递归的种类(Types of Recursion)
目录 尾递归(Tail Recursion) 什么是 Loop(循环)? 复杂度分析 头递归(Head Recursion) 树形递归(Tree Recursion) 线性递归(Linear Recursion)…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的,需要先安…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重,适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解,并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...
