html js点击下拉菜单代码,JavaScript下拉菜单功能实例代码

本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：

下拉菜单

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;

/*background: url(xjt.png) no-repeat right center;*/

}

cite:before {

content: ”;

position: absolute;

right: 7px;

bottom: 7px;

width: 0;

height: 0;

border-width: 4px;

border-style: solid;

border-color: #888 transparent transparent transparent;

transition: all 0.2s;

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-o-transition: all 0.2s;

-ms-transition: all 0.2s;

transform-origin: 50% 25%;

-ms-transform-origin: 50% 25%;

-moz-transform-origin: 50% 25%;

-webkit-transform-origin: 50% 25%;

-o-transform-origin: 50% 25%;

}

.extended cite:before {

transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-o-transform: rotate(180deg);

-ms-transform: rotate(180deg);

}

#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;

}

.animated {

animation-fill-mode: both;

-webkit-animation-fill-mode: both;

-moz-animation-fill-mode: both;

-o-animation-fill-mode: both;

-ms-animation-fill-mode: both;

}

.speed_fast {

animation-duration: .3s;

/*-webkit-animation-duration: 0.2s;

-moz-animation-duration: 0.2s;

-o-animation-duration: 0.2s;

-ms-animation-duration: 0.2s;*/

}

.anim_extendDown {

animation-name: extendDown;

-webkit-animation-name: extendDown;

-moz-animation-name: extendDown;

-o-animation-name: extendDown;

-ms-animation-name: extendDown;

}

@keyframes extendDown {

0% {

border-bottom-color: transparent;

height: 0;

}

100% {

border-bottom-color: #333;

height: 120px;

}

}

@-webkit-keyframes extendDown {

0% {

border-bottom-color: transparent;

height: 0;

}

100% {

border-bottom-color: #333;

height: 120px;

}

}

@-moz-keyframes extendDown {

0% {

border-bottom-color: transparent;

height: 0;

}

100% {

border-bottom-color: #333;

height: 120px;

}

}

@-o-keyframes extendDown {

0% {

border-bottom-color: transparent;

height: 0;

}

100% {

border-bottom-color: #333;

height: 120px;

}

}

@-ms-keyframes extendDown {

0% {

border-bottom-color: transparent;

height: 0;

}

100% {

border-bottom-color: #333;

height: 120px;

}

}

window.onload = function() {

var box = document.getElementById(‘divselect’),

title = box.getElementsByTagName(‘cite’)[0],

menu = box.getElementsByTagName(‘ul’)[0],

as = box.getElementsByTagName(‘a’),

index = -1;

//初始样式

function resetM() {

box.className = “”;

menu.className = “”;

menu.style.display = “none”;

index = -1;

resetA();

}

//清空a选项样式

function resetA() {

for(var i = 0; i < as.length; i++) {

as[i].style.background = “#fff”;

}

}

// 点击三角时

title.onclick = function(event) {

//阻止事件冒泡

event = event || window.event;

event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;

if(box.className == “extended”) {

resetM();

} else {

box.className = “extended”; //给box加类名让三角旋转

menu.className = “animated speed_fast anim_extendDown”; //下拉菜单的下拉动画

menu.style.display = “block”;

}

}

document.onkeydown = function(event) {

event = event || window.event;

if(box.className == “extended”) {

if(event.keyCode == 38) { //向上键

event.preventDefault ? event.preventDefault() : event.returnValue = false;

index–;

if(index == -1) {

index = as.length – 1;

}

resetA();

as[index].style.background = “#ccc”;

} else if(event.keyCode == 40) { //向下键

event.preventDefault ? event.preventDefault() : event.returnValue = false;

index++;

if(index == as.length) {

index = 0;

}

resetA();

as[index].style.background = “#ccc”;

} else if(event.keyCode == 13) { //回车键

event.preventDefault ? event.preventDefault() : event.returnValue = false;

title.innerHTML = as[index].innerHTML;

resetM();

}

}

}

// 滑过滑过、离开、点击每个选项时

for(var i = 0; i < as.length; i++) {

as[i].onmouseover = function() {

resetA();

this.style.background = “#ccc”;

index = this.getAttribute(‘selectid’) – 1;

}

as[i].onclick = function() {

resetM();

title.innerHTML = this.innerHTML;

}

}

// 点击页面空白处时

document.onclick = function() {

resetM();

}

}

1、要阻止事件冒泡

2、键盘事件，用index索引

3、通过设置类名或清空类名的方式给元素增加动画和恢复原有样式

以上所述是小编给大家介绍的JavaScript下拉菜单功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！