ui、li模拟下拉框
转载:原文地址:https://www.jianshu.com/p/e303e0298e9e
效果图:
HTML:
<div class="rank_top">
<div class="rank_top_1">
<ul class="rank_top_1_ul">
<li><span>请选择员工</span> <i><img src="箭头.png"></i></li>
<li><img src="a1.jpg">111111</li>
<li><img src="a1.jpg">22222</li>
<li><img src="a1.jpg">3333</li>
<li><img src="a1.jpg">44444</li>
<li><img src="a1.jpg">55555</li>
<li><img src="a1.jpg">666666</li>
</ul>
</div>
</div>
CSS:
<style type="text/css">
.rank_top_1_ul{
width: 300px;
height: 50px;
display: block;
float: left;
margin-top: 20px;
margin-left: 50px;
}
.rank_top_1_ul li {
display: block;
line-height: 50px;
height: 50px;
width: 300px;
background-color: greenyellow;
color: black;
text-align: center;
}
.rank_top_1_ul li img{
height: 100%;
margin-left: 0px;
left: 0px;
float: left;
}
.rank_top_1_ul li i img{
height: 100%;
margin-left: 0px;
left: 0px;
float: right;
transform: rotate(0deg);
}
.rank_top_1_ul li:not(:first-child){
display: none;
}
.rank_top_1_ul li:not(:first-child):hover{
background-color: grey;
color: white;
}
</style>
JS:
<script type="text/javascript" >
window.onload=function(){
// 选择员工点击事件
var $staffSelectt_Ul_li = document.querySelectorAll(".rank_top_1_ul li");
$staffSelectt_Ul_li[0].onclick = function(){
//获取小箭头对象
var $imgLabel = document.querySelector(".rank_top_1_ul li:first-child img");
//获取下标为 2 的li标签的display 状态,如果是 block ,说明 li 标签已经显示了
//所以点击事件, 执行的是 关闭 li 标签列表的功能。 反之亦然
var $tempFlag = $staffSelectt_Ul_li[1].style.display;
if($tempFlag ==="block" ){
// 小箭头旋转,回位
$imgLabel.style.transform = 'rotate(0deg)';
for(var $i=1;$i<$staffSelectt_Ul_li.length;$i++){
$staffSelectt_Ul_li[$i].style.display = "none";
}
}else{
// 小箭头旋转,90du
$imgLabel.style.transform = 'rotate(-90deg)';
for(var $i=1;$i<$staffSelectt_Ul_li.length;$i++){
$staffSelectt_Ul_li[$i].style.display = "block";
}
}
//给每个li对象都添加一个点击事件
for(var $i=1;$i<$staffSelectt_Ul_li.length;$i++){
$staffSelectt_Ul_li[$i].onclick=function(){
//将点击li 的文字赋 给第一个li
$staffSelectt_Ul_li[0].firstChild.innerText = this.innerText;
// 关闭所有的 li(除了第一个)
for(var $i=1;$i<$staffSelectt_Ul_li.length;$i++){
$staffSelectt_Ul_li[$i].style.display = "none";
}
// 小箭头旋转,归位
$imgLabel.style.transform = 'rotate(0deg)';
}
}
}
};
最新文章
- 【解决】SQL Server作业中Excel Application不能访问文件
- Nginx配置文件说明
- 一个App完成入门篇(四)- 完成反馈页面
- NSArray 所有基础点示例
- 关于Guid
- 为什么说外卖O2O行业的未来在于尖端技术?
- jqXHR 对象(post完成后再调用函数)
- Axure简介
- [小技巧] git: Your branch and &#39;origin/master&#39; have diverged
- asp.net网站 提示Ambiguous match found
- python基础set
- open_binary_frm
- android 代码设置、打开wifi热点及热点的连接
- 初识Mybatis框架,实现增删改查等操作
- EasyUI - Tooltip 提示控件
- 微信企业号JS-SDK选择图片、上传图片
- Codeforces Round #485 (Div. 2) A. Infinity Gauntlet
- HBase集成(准备篇)
- dll 显示调用
- Day 13 迭代器,生成器.
热门文章
- Java NIO学习系列七:Path、Files、AsynchronousFileChannel
- Java爬虫框架 | 爬小说
- Visual Studio Debug
- Flink 源码解析 —— 如何获取 JobGraph?
- python案例:实现一个函数版的名片管理系统
- .netcore持续集成测试篇之 .net core 2.1项目集成测试
- python小白手册之字符串的私有方法和公用方法
- 在ubuntu下使用CMake及VSCode对LoRaMac-node代码进行编译调试
- springboot中的外界jar的引入:
- JS基础-该如何理解原型、原型链?