js implements custom drop-down box
|
This article example shares the specific code of js to implement a custom drop-down box for your reference. The specific content is as follows Implementation ideas: (1) Create a list and a span tag (any tag will do). (2) Bind a click event to each item in the list. When you click an item, the span content changes to that item's content, and then hide the list. (3) To hide the list first, click the span tag to display it. If nothing is selected, click document to hide the list. (4) Each key on the keyboard has its own key code. This key code can be used to determine which key is pressed to perform the corresponding operation. The following function can obtain the key code of the keyboard.
document.addEventListener("keyup",function(e){
console.log(e.keyCode)
})Core code: content triggered by the up, down, and enter keys on the keyboard
//Keyboard press event document.addEventListener("keyup",function(e){
var e=e||window.e;
reset()
//Up key if(e.keyCode=="38"){
index--;
if(index<0){
index=list.length-1
}
}
//Down keyif(e.keyCode=="40"){
index++;
if(index>list.length-1){
index=0
}
}
//enter confirmation keyif(e.keyCode=="13"){
cite.innerHTML=list[index].innerHTML;
ul.style.display="none";
return ;
}
list[index].className="bg";
})Full code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop-down menu</title>
<style type="text/css">
body,
ul,
li {
margin: 0;
padding: 0;
font-size: 13px;
}
ul,
li {
list-style: none;
}
.divselect {
width: 186px;
margin: 80px auto;
position: relative;
z-index: 10000;
}
.divselect cite {
width: 150px;
height: 24px;
line-height: 24px;
display: block;
color: #807a62;
cursor: pointer;
font-style: normal;
padding-left: 4px;
padding-right: 30px;
border: 1px solid #333333;
}
.divselect ul {
width: 184px;
border: 1px solid #333333;
background-color: #ffffff;
position: absolute;
z-index: 20000;
margin-top: -1px;
display: none;
}
.divselect ul li {
height: 24px;
line-height: 24px;
}
.divselect ul li a {
display: block;
height: 24px;
color: #333333;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
.divselect ul li:hover{
background: #eee;
}
.bg{
background: #eee;
}
</style>
</head>
<body>
<div class="divselect">
<span>Please click to select a category</span>
<ul>
<li>
<a href="javascript:;">ASP Development</a>
</li>
<li>
<a href="javascript:;">.NET Development</a>
</li>
<li>
<a href="javascript:;">PHP Development</a>
</li>
<li>
<a href="javascript:;">Javascript Development</a>
</li>
<li>
<a href="javascript:;">Java effects</a>
</li>
</ul>
</div>
<script type="text/javascript">
var cite = document.querySelector ("span"), //Selected content ul = document.querySelector ("ul"), //List list = document.querySelectorAll ("a"), //Selected item index = -1; //Index //Click the list to display cite.addEventListener ("click", function (e) {
var e=e||window.e;
e.stopPropagation(); //Stop bubbling to prevent triggering hidden events bound to document ul.style.display="block";
})
//Bind click to each list item for(var i=0;i<list.length;i++){
list[i].onclick=function(){
cite.innerHTML=this.innerHTML;
ul.style.display="none"; //You don't need to write "hide" here. If you don't write "hide", it will bubble up to the document and trigger the hide event on the document}
}
//Keyboard press event document.addEventListener("keyup",function(e){
var e=e||window.e;
reset()
//Up key if(e.keyCode=="38"){
index--;
if(index<0){
index=list.length-1
}
}
//Down keyif(e.keyCode=="40"){
index++;
if(index>list.length-1){
index=0
}
}
//enter confirmation keyif(e.keyCode=="13"){
cite.innerHTML=list[index].innerHTML;
ul.style.display="none";
return ;
}
list[index].className="bg";
})
//Click the document to hide when it is not selected document.addEventListener("click",function(){
ul.style.display="none";
})
//Style reset function reset(){
for(var i=0;i<list.length;i++){
list[i].className="";
}
}
</script>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Getting Started Guide to MySQL Sharding
>>: IE8 Beta 1 has two areas that require your attention
Recommend
Vue implements tab label (label exceeds automatic scrolling)
When the created tab label exceeds the visible ar...
Detailed explanation of the pitfalls of MySQL 8.0
I updated MySQL 8.0 today. The first problem: Nav...
MySQL Basics in 1 Hour
Table of contents Getting Started with MySQL MySQ...
Implementation of adding remark information to mysql
Preface Some people have asked me some MySQL note...
Linux exposes Sudo privilege escalation vulnerability, any user can also run root commands
As one of the most commonly used and important ut...
Vue implements form validation function
This article mainly describes how to implement fo...
Django+vue registration and login sample code
register The front-end uses axios in vue to pass ...
A detailed introduction to setting up Jenkins on Tencent Cloud Server
Table of contents 1. Connect to Tencent Cloud Ser...
JavaScript source code for Elimination
JavaScript to achieve the source code download ad...
Use of Linux read command
1. Command Introduction The read command is a bui...
NodeJs high memory usage troubleshooting actual combat record
Preface This is an investigation caused by the ex...
Linux file management command example analysis [permissions, create, delete, copy, move, search, etc.]
This article describes the Linux file management ...
MySQL master-slave replication delay causes and solutions
Table of contents A brief overview of the replica...
CentOS 7.x docker uses overlay2 storage method
Edit /etc/docker/daemon.json and add the followin...
Troubleshooting and solutions for MySQL auto-increment ID oversize problem
introduction Xiao A was writing code, and DBA Xia...