js實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果
通過onclick單擊事件,實(shí)現(xiàn)效果,代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>開關(guān)按鈕設(shè)置</title> </head> <link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" /> <style> div{ width:120px; margin: 0px auto; border: 2px solid black;} ul{ display: none; } </style> <script> window.onload=function(){ var odiv=document.getElementById("v"); var oli=odiv.getElementsByTagName("ul")[0]; var onf=true odiv.onclick=function(){ if (onf==true) { oli.style.display='block'; onf=false } else{ oli.style.display='none'; onf=true } } } </script> <body> <div id="v"> <h4>你好啊,小老弟</h2> <ul> <li>come</li> <li>on</li> <li>do</li> </ul> </div> </body> </html><br>
實(shí)現(xiàn)效果:
總結(jié)
以上所述是小編給大家介紹的js實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JavaScript實(shí)現(xiàn)HTML導(dǎo)航欄下拉菜單
- JavaScript實(shí)現(xiàn)網(wǎng)頁下拉菜單效果
- Vue.js下拉菜單組件使用方法詳解
- js 下拉菜單點(diǎn)擊旁邊收起實(shí)現(xiàn)(踩坑記)
- 淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令
- js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
- 純JS實(shí)現(xiàn)出生日期[年月日]下拉菜單效果
- JS實(shí)現(xiàn)點(diǎn)擊下拉菜單把選擇的內(nèi)容同步到input輸入框內(nèi)的實(shí)例
- js阻止默認(rèn)右鍵的下拉菜單方法
- js面向?qū)ο蠓庋b級(jí)聯(lián)下拉菜單列表的實(shí)現(xiàn)步驟
相關(guān)文章
javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法
這篇文章主要介紹了javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法,通過自定義函數(shù)中的數(shù)組替換實(shí)現(xiàn)數(shù)字轉(zhuǎn)換整數(shù)金額大寫的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01js獲取html頁面節(jié)點(diǎn)方法(遞歸方式)
這篇文章主要介紹了js使用遞歸方式獲取html頁面節(jié)點(diǎn)的方法,大家可以參考使用吧2013-12-12js實(shí)現(xiàn)文件流式下載文件方法詳解及完整代碼
這篇文章主要介紹了用js實(shí)現(xiàn)讀取文件流并下載到本地的方法,也就是我們經(jīng)常說的使用js下載文件需要的朋友可以參考下2022-12-12Javascript連接數(shù)據(jù)庫查詢并插入數(shù)據(jù)
這篇文章主要介紹了Javascript連接數(shù)據(jù)庫查詢并插入數(shù)據(jù),下面文章圍繞主題展開詳細(xì)內(nèi)容,具有一的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-03-03Echarts折線圖設(shè)置線條顏色及線條以下代碼示例
最近項(xiàng)目需要,一直在使用Echarts視圖,現(xiàn)在遇到一個(gè)要修改echarts折線圖顏色的需求,下面這篇文章主要給大家介紹了關(guān)于Echarts折線圖設(shè)置線條顏色及線條以下區(qū)域漸變顏色的相關(guān)資料,需要的朋友可以參考下2024-02-02Typescript中interface自動(dòng)化生成API文檔詳解
ypeScript 的核心原則之一是對(duì)值所具有的結(jié)構(gòu)進(jìn)行類型檢查,下面這篇文章主要給大家介紹了關(guān)于Typescript中interface自動(dòng)化生成API文檔的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載
這篇文章主要介紹了webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08WordPress中利用AJAX技術(shù)進(jìn)行評(píng)論提交的實(shí)現(xiàn)示例
這篇文章主要介紹了WordPress中利用AJAX技術(shù)進(jìn)行評(píng)論提交的實(shí)現(xiàn)示例,整個(gè)處理的關(guān)鍵點(diǎn)在于文中的ajax_comment函數(shù),需要的朋友可以參考下2016-01-01JS+CSS相對(duì)定位實(shí)現(xiàn)的下拉菜單
這篇文章主要介紹了JS+CSS相對(duì)定位實(shí)現(xiàn)的下拉菜單,涉及JavaScript結(jié)合css的定位技術(shù)實(shí)現(xiàn)下拉菜單的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10