用純JS實(shí)現(xiàn)二級(jí)菜單效果
本文實(shí)例為大家分享了JS實(shí)現(xiàn)二級(jí)菜單效果的具體代碼，供大家參考，具體內(nèi)容如下
js點(diǎn)擊出現(xiàn)二級(jí)菜單，點(diǎn)擊二級(jí)菜單主菜單換成二級(jí)菜單
點(diǎn)擊出現(xiàn)二級(jí)菜單
<style>*{margin:0px auto;padding:0px;} .yiji{width:200px;height:40px;background-color:red;color:#fff;text-align:center;line-height:40px;hvertical-align:middle;border:1px solid #FFF;} .erji1{width:200px;height:40px;background-color:#F63;color:#fff;text-align:center;line-height:40px;vertical-align:middle;border:1px solid #FFF;} #erji2{display:none;} #erji3{display:none;} #erji4{display:none;} </style> </head> <body><div onclick='Show(’erji2’)'>首頁(yè)</div><div id='erji2'> <div class='erji1'>1</div> <div class='erji1'>1</div> <div class='erji1'>1</div> </div> <div onclick='Show(’erji3’)'>人才</div><div id='erji3'> <div class='erji1'>1</div> <div class='erji1'>1</div> <div class='erji1'>1</div> </div> <div onclick='Show(’erji4’)'>市場(chǎng)</div><div id='erji4'> <div class='erji1'>1</div> <div class='erji1'>1</div> <div class='erji1'>1</div></div> </body> <script type='text/javascript'>function Show(a){ var a = document.getElementById(a); if(a.style.display == 'block') {a.style.display = 'none'; } else {a.style.display = 'block'; }} </script>
#caidan{width:200px;height:40px;border:1px solid #999;text-align:center;line-height:40px;vertical-align:middle;} .list{ width:200px; height:40px; border:1px solid #999; border-top-width:0px; text-align:center; line-height:40px; vertical-align:middle; display:none; } #caidan,.list:hover{ cursor:pointer; } .list:hover{ background-color:#63F;}
<div style='width:200px; height:400px;'> <div onclick='Show()'>中國(guó)</div> <div onclick='Xuan(this)'>山東</div> <div onclick='Xuan(this)'>濟(jì)南</div> <div onclick='Xuan(this)'>濟(jì)寧</div> <div onclick='Xuan(this)'>威海</div> <div onclick='Xuan(this)'>淄博</div></div>
function Show(){ var list = document.getElementsByClassName('list'); //顯示列表 for(var i=0;i<list.length;i++) {list[i].style.display = 'block'; } } function Xuan(a){ var c = document.getElementById('caidan'); c.innerHTML = a.innerHTML; var list = document.getElementsByClassName('list'); //顯示列表 for(var i=0;i<list.length;i++) {list[i].style.display = 'none'; } }
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 如何基于python3和Vue實(shí)現(xiàn)AES數(shù)據(jù)加密2. 10個(gè)提供免費(fèi)PHP腳本下載的網(wǎng)站3. PHP擴(kuò)展之APC——Alternative PHP Cache(可選PHP緩存)4. PHP設(shè)計(jì)模式（四）原型模式Prototype實(shí)例詳解【創(chuàng)建型】5. Java 基于UDP協(xié)議實(shí)現(xiàn)消息發(fā)送6. Python編寫nmap掃描工具7. Java向Runnable線程傳遞參數(shù)方法實(shí)例解析8. python 爬取嗶哩嗶哩up主信息和投稿視頻9. ASP.NET MVC前臺(tái)動(dòng)態(tài)添加文本框并在后臺(tái)使用FormCollection接收值10. php5.6不能擴(kuò)展redis.so的解決方法
網(wǎng)公網(wǎng)安備