JavaScript下拉菜單功能實(shí)例代碼
本文給大家分享一段實(shí)例代碼關(guān)于js實(shí)現(xiàn)下拉菜單功能,具體代碼如下所示:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜單</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; /*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; } } </style> </head> <body> <div id="divselect"> <cite>請(qǐng)選擇分類</cite> <ul> <li id="li"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="1">ASP開(kāi)發(fā)</a> </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="2">.NET開(kāi)發(fā)</a> </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="3">PHP開(kāi)發(fā)</a> </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="4">Javascript開(kāi)發(fā)</a> </li> <li> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="5">Java特效</a> </li> </ul> </div> <script type="text/javascript"> 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選項(xiàng)樣式 function resetA() { for(var i = 0; i < as.length; i++) { as[i].style.background = "#fff"; } } // 點(diǎn)擊三角時(shí) 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加類名讓三角旋轉(zhuǎn) menu.className = "animated speed_fast anim_extendDown"; //下拉菜單的下拉動(dòng)畫(huà) 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(); } } } // 滑過(guò)滑過(guò)、離開(kāi)、點(diǎn)擊每個(gè)選項(xiàng)時(shí) 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; } } // 點(diǎn)擊頁(yè)面空白處時(shí) document.onclick = function() { resetM(); } } </script> </body> </html>
1、要阻止事件冒泡
2、鍵盤事件,用index索引
3、通過(guò)設(shè)置類名或清空類名的方式給元素增加動(dòng)畫(huà)和恢復(fù)原有樣式
以上所述是小編給大家介紹的JavaScript下拉菜單功能實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
使用typescript類型實(shí)現(xiàn)ThreeSum
這篇文章主要介紹了使用typescript類型實(shí)現(xiàn)ThreeSum,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以一下,希望對(duì)你學(xué)習(xí)又是幫助2022-08-08js實(shí)現(xiàn)時(shí)間顯示幾天前、幾小時(shí)前或者幾分鐘前的方法集錦
這篇文章主要介紹了js實(shí)現(xiàn)時(shí)間顯示幾天前、幾小時(shí)前或者幾分鐘前的方法,實(shí)例匯總分析了時(shí)間顯示格式轉(zhuǎn)換的常用思路與技巧,需要的朋友可以參考下2015-05-05js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動(dòng)距離及元素距離瀏覽器頂部距離
這篇文章主要給大家介紹了關(guān)于js獲取元素到可視區(qū)的距離、瀏覽器窗口滾動(dòng)距離及元素距離瀏覽器頂部距離的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11js閉包實(shí)現(xiàn)按秒計(jì)數(shù)
閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式(通常是一個(gè)函數(shù)),因而這些變量也是該表達(dá)式的一部分。相信很少有人能直接看懂這句話,因?yàn)樗枋龅奶珜W(xué)術(shù)。其實(shí)這句話通俗的來(lái)說(shuō)就是:JavaScript中所有的function都是一個(gè)閉包。2015-04-04js用正則表達(dá)式來(lái)驗(yàn)證表單(比較齊全的資源)
在學(xué)習(xí)網(wǎng)頁(yè)中的表單驗(yàn)證,順便學(xué)習(xí)下正則表達(dá)式,在網(wǎng)上找了后發(fā)現(xiàn)了一個(gè)比較齊全的資源,稍微進(jìn)行了一下排版,喜歡的朋友可以收藏2013-11-11原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07javascript在firefox下設(shè)為首頁(yè)的代碼
javascript在firefox下設(shè)為首頁(yè)的代碼...2007-09-09JavaScript通過(guò)字典進(jìn)行字符串翻譯轉(zhuǎn)換的方法
這篇文章主要介紹了JavaScript通過(guò)字典進(jìn)行字符串翻譯轉(zhuǎn)換的方法,涉及javascript字符串轉(zhuǎn)換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03