<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
text-decoration: none;
list-style: none;
margin: 0;
padding: 0;
}
div {
width: 600px;
margin: auto;
text-align: center;
}
button {
width: 100px;
height: 45px;
border: none;
background-color: pink;
}
ul {
margin: auto;
width: 100px;
border: paleturquoise 1px solid;
display: none;
}
ul li {
margin: 5px 0;
}
ul li:nth-child(3) {
border-top: solid 1px paleturquoise;
}
</style>
</head>
<body>
<div>
<button>打开输入法</button>
<ul>
<li><a href="JavaScript:;">拼音</a></li>
<li><a href="JavaScript:;">手写</a></li>
<li><a href="JavaScript:;">关闭</a></li>
</ul>
</div>
</body>
<script>
// 获取元素
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
var oA = document.querySelectorAll('a');
btn.onclick = function () {
//利用三元表达式进行判断
ul.style.display = ul.style.display == "block" ? "none" : "block";
}
for (var i = 0; i < oA.length; i++) {
oA[i].n = i;
//获取元素长度
console.log(oA[i].n);
if (oA[i].n == 2) {
oA[i].onclick = function () {
btn.innerHTML = '打开输入法';
ul.style.display = 'none';
}
}
else {
oA[i].onclick = function () {
//将当前选中的元素的值赋给btn按钮
btn.innerHTML = this.innerHTML;
//复制完毕隐藏ul标签
ul.style.display = 'none';
}
}
}
</script>
</html>
效果图