纯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();
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/110856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序中如何使用自定义组件应用及搭建个人中心布局

一&#xff0c;自定义组件 从小程序基础库版本 1.6.3 开始&#xff0c;小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。 开发者可以将页面内的功能模块抽象成自定义组件&#xff0c;以便在不同的页面中重复使用&#xff1b;也可以将复杂的…

02、MySQL-------主从复制

目录 七、MySql主从复制启动主从复制&#xff1a;原理&#xff1a;实现&#xff1a;1、创建节点2、创建数据库3、主从配置1、主节点2、从节点 4、测试&#xff1a;5、问题&#xff1a;1、uuid修改2、service_id3、读写不同步方法1&#xff1a;方法2&#xff1a; 七、MySql主从复…

pip install huggingface_hub时报错

pip install huggingface_hub时报错&#xff1a; 可以尝试&#xff1a;pip install --upgrade huggingface_hub 进行安装 方法参考了&#xff1a;https://blog.csdn.net/m0_72295867/article/details/132060750

HTTP基础

HTTP请求报文格式 HTTP 的请求报文分为三个部分 请求行&#xff08;Request Line&#xff09;、请求头&#xff08;Request Header&#xff09;和请求体&#xff08;Request Body&#xff09;。请求体是HTTP请求的核心&#xff0c;其中包含了需要上传服务器的数据。常见的请求…

macOS查端口占用进程

java开发人员&#xff0c;端口冲突的问题基本都遇到过吧&#xff01;以下的日志是否熟悉&#xff1a; *************************** APPLICATION FAILED TO START ***************************Description:The Tomcat connector configured to listen on port 8084 failed to …

图论与网络优化

2.概念与计算 2.1 图的定义 图(graph) G G G 是一个有序的三元组&#xff0c;记作 G < V ( G ) , E ( G ) , ψ ( G ) > G<V(G),E(G),\psi (G)> G<V(G),E(G),ψ(G)>。 V ( G ) V(G) V(G) 是顶点集。 E ( G ) E(G) E(G) 是边集。 ψ ( G ) \psi (G) ψ(G…

小程序技术在信创操作系统中的应用趋势:适配能力有哪些?

小程序技术在信创操作系统中的应用前景非常广阔&#xff0c;但也面临着一些挑战和问题。开发者需要积极应对这些挑战和问题&#xff0c;为信创操作系统的发展和推广做出贡献。同时&#xff0c;开发者也需要关注小程序技术在信创操作系统中的应用趋势&#xff0c;积极探索新的应…

Python订单生成器+队列+异步提高性能和容错

以下代码实现了一个订单生成器&#xff0c;使用 asyncio 和 aioredis 库实现了高并发地生成订单&#xff0c;并将新增订单异步更新到数据库。具体实现流程如下&#xff1a; 初始化 OrderGenerator 类。传入 Redis 服务器地址和并发数&#xff0c;在初始化函数中设置并发数和一…

【Django 03】QuerySet 和 Instance应用

1. DRF QuerySet 和 Instance功能概述 1.1 QuerySet 从数据库中查询结果存放的集合称为 QuerySet。 Django ORM用到三个类&#xff1a;Manager、QuerySet、Model。每个Model都有一个默认的 manager实例&#xff0c;名为objects。Django的ORM通过Mode的objects属性提供各种数据…

Java 常用类(包装类)

目录 八大Wrapper类包装类的分类 装箱和拆箱包装类和基本数据类型之间的转换常见面试题 包装类方法包装类型和String类型的相互转换包装类常用方法&#xff08;以Integer类和Character类为例&#xff09;Integer类和Character类的常用方法 Integer创建机制&#xff08;面试题&a…

划词搜索IP插件

插件背景 浏览器插件可以让用户根据个人工作及日常需求来定制浏览器的功能和界面。当用户在网页上看到一些IP地址时&#xff0c;或许会好奇它们的来源和归属。传统的做法是&#xff0c;用户需要复制这个IP地址&#xff0c;然后跳转到埃文科技旗下的http://IPUU.net网站进行查询…

基于Java的考研信息查询系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

Flink SQL 时区 -- 时间字符串转时间戳并转换时区

文章目录 一、数据需求&#xff1a;二、探索路程1、UNIX_TIMESTAMP CONVERT_TZ2、UNIX_TIMESTAMP 三、解决方案TIMESTAMPADD TO_TIMESTAMP 一、数据需求&#xff1a; 将时间字符串格式化&#xff0c;转变成时间戳&#xff0c;再加8小时后写入clickhouse 2023-10-17T03:00:4…

速卖通测评补单的条件和步骤

速卖通测评补单对于卖家来说是一种低成本、高回报的推广营销方式&#xff0c;可以提高商品的流量、转化率、关键词质量分和链接权重。但是如果处理不当&#xff0c;可能会对店铺产生负面影响。下面是实现自养号给自己店铺测评的条件和步骤&#xff1a; 1. 稳定的测评环境系统 …

使用 OpenSSL 扩展来实现公钥和私钥加密

首先&#xff0c;你需要生成一对公钥和私钥。可以使用 OpenSSL 工具来生成&#xff1a; 1、生成私钥 openssl genpkey -algorithm RSA -out private_key.pem 2、从私钥生成公钥&#xff1a; openssl rsa -pubout -in private_key.pem -out public_key.pem现在你有了一个私钥…

Docker是一个流行的容器化平台,用于构建、部署和运行应用程序。

文章目录 Web应用程序数据库服务器微服务应用开发环境持续集成和持续部署 (CI/CD)应用程序依赖项云原生应用程序研究和教育 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;…

react配置 axios

配置步骤&#xff08;基本配置&#xff09;&#xff1a; 1.安装 axios cnpm install axios --save2.src/utils 新建一个 request.js文件(没有utils就新建一个目录然后再建一个request.js) 3.request代码如下&#xff1a; 这个是最简单的配置了&#xff0c;你可以根据自己的需…

链表的概念+MySingleList的实现

文章目录 链表一、 链表的概念1.概念2. 结构 二、MySingleList的实现1 .定义内部类2 .创建链表3. 遍历链表并打印4.查找单链表中是否包含关键字key5.得到链表的长度6.头插法7. 尾插法8.任意位置插入8.删除结点清空 链表 顺序存储&#xff1a;顺序表/ArrayList 优点&#xff1…

【数据库范式】实际案例分析

前言 在日常业务研发过程中&#xff0c;我们常常需要与数据库表打交道。设计范式是数据表设计的基本原则&#xff0c;对于数据表的设计范式&#xff0c;我们特别容易忽略它的存在。很多时候&#xff0c;当数据库运行了一段时间之后&#xff0c;我们才发现数据表设计上有问题。然…

前端--性能优化【1】--网络优化与页面渲染优化

一、网络优化 1、DNS预解析 link标签的rel属性设置dns-prefetch&#xff0c;提前获取域名对应的IP地址 2、CDN&#xff08;网络分发系统&#xff09; 用户与服务器的物理距离对响应时间也有影响。 内容分发网络&#xff08;CDN&#xff09;是一组分散在不同地理位置的 web…