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
What is ssh? How to use? What are the misunderstandings?
Table of contents Preface What is ssh What is ssh...
Alibaba Cloud Nginx configures https to implement domain name access project (graphic tutorial)
Step 1: Sign a third-party trusted SSL certificat...
HTML+CSS+JavaScript to achieve list loop scrolling example code
Description: Set a timer to replace the content of...
How to change the terminal to a beautiful command line prompt in Ubuntu 18
I reinstalled VMware and Ubuntu, but the command ...
Windows Server 2008 R2 Multi-User Remote Desktop Connection Licensing
At work, we often need remote servers and often e...
Tutorial on installing MySQL 5.6 using RPM in CentOS
All previous projects were deployed in the Window...
How to use dd command in Linux without destroying the disk
Whether you're trying to salvage data from a ...
Specific implementation methods of MySQL table sharding and partitioning
Vertical table Vertical table splitting means spl...
How to import/save/load/delete images locally in Docker
1. Docker imports local images Sometimes we copy ...
Vue data two-way binding implementation method
Table of contents 1. Introduction 2. Code Impleme...
Practical solution for Prometheus container deployment
environment Hostname IP address Serve Prometheus ...
MySQL pessimistic locking and optimistic locking implementation
Table of contents Preface Actual Combat 1. No loc...
HTML web page creation tutorial Use iframe tags carefully
Using iframes can easily call pages from other we...
In-depth explanation of the global status of WeChat applet
Preface In WeChat applet, you can use globalData ...
Detailed installation tutorial of mysql 5.7 under CentOS 6 and 7
You always need data for development. As a server...