Reprint: Original Address: https://www.jianshu.com/p/e303e0298e9e
Renderings:
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 of the type = "text / JavaScript">
the window.onload = function () {
// select employees click event
var $ staffSelectt_Ul_li = document.querySelectorAll ( "rank_top_1_ul li.");
staffSelectt_Ul_li $ [0] .onclick = function () {
// Get the object on the small arrow
var = $ imgLabel document.querySelector:; ( "First-li rank_top_1_ul Child IMG.")
// Get subscript label li display 2 state, if a block, explain li tag has been displayed
// so click event, execution is off li tag list function. Vice versa
var = $ $ tempFlag staffSelectt_Ul_li [. 1] .style.display;
IF ($ tempFlag === "Block") {
// small arrow rotation, return
$ imgLabel.style.transform = 'rotate (0deg) ' ;
for (I = $ var. 1; $ I <$ staffSelectt_Ul_li.length; $ I ++) {
$ staffSelectt_Ul_li [$ I] .style.display = "none";
}
} the else {
// small arrow rotation, 90du
$ imgLabel. style.transform = 'rotate (-90deg)' ;
for (var. 1 = $ I; I $ <$ staffSelectt_Ul_li.length; $ I ++) {
$ staffSelectt_Ul_li [$ I] .style.display = "Block";
}
}
// li objects are added to each of a click event
for (var. 1 = $ I; I $ <$ staffSelectt_Ul_li.length; $ I ++) {
$ staffSelectt_Ul_li [$ I] .onclick = function () {
// li character assigned to the first click a li
$ staffSelectt_Ul_li [0 ] = .firstChild.innerText this.innerText;
// close all the Li (except the first one)
for (I = $ var. 1; $ I <$ staffSelectt_Ul_li.length; $ I ++) {
$ staffSelectt_Ul_li [$ I] .style = .display "none";
}
// small arrow rotation, homing
$ imgLabel.style.transform = 'rotate (0deg)';
}
}
}
};