js實現(xiàn)按鈕開關(guān)單機下拉菜單效果
更新時間：2018年11月22日 11:22:52 作者：靜遇。
這篇文章主要介紹了js實現(xiàn)按鈕開關(guān)單機下拉菜單效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
通過onclick單擊事件，實現(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>
實現(xiàn)效果：
總結(jié)
以上所述是小編給大家介紹的js實現(xiàn)按鈕開關(guān)單機下拉菜單效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法
這篇文章主要介紹了javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法,通過自定義函數(shù)中的數(shù)組替換實現(xiàn)數(shù)字轉(zhuǎn)換整數(shù)金額大寫的功能,非常具有實用價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了js使用遞歸方式獲取html頁面節(jié)點的方法，大家可以參考使用吧2013-12-12
這篇文章主要介紹了用js實現(xiàn)讀取文件流并下載到本地的方法,也就是我們經(jīng)常說的使用js下載文件需要的朋友可以參考下2022-12-12
Javascript連接數(shù)據(jù)庫查詢并插入數(shù)據(jù)
這篇文章主要介紹了Javascript連接數(shù)據(jù)庫查詢并插入數(shù)據(jù)，下面文章圍繞主題展開詳細內(nèi)容，具有一的參考價值，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-03-03
Echarts折線圖設(shè)置線條顏色及線條以下代碼示例
最近項目需要,一直在使用Echarts視圖,現(xiàn)在遇到一個要修改echarts折線圖顏色的需求,下面這篇文章主要給大家介紹了關(guān)于Echarts折線圖設(shè)置線條顏色及線條以下區(qū)域漸變顏色的相關(guān)資料,需要的朋友可以參考下2024-02-02
Typescript中interface自動化生成API文檔詳解
ypeScript 的核心原則之一是對值所具有的結(jié)構(gòu)進行類型檢查,下面這篇文章主要給大家介紹了關(guān)于Typescript中interface自動化生成API文檔的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載
這篇文章主要介紹了webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
WordPress中利用AJAX技術(shù)進行評論提交的實現(xiàn)示例
這篇文章主要介紹了WordPress中利用AJAX技術(shù)進行評論提交的實現(xiàn)示例,整個處理的關(guān)鍵點在于文中的ajax_comment函數(shù),需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS+CSS相對定位實現(xiàn)的下拉菜單,涉及JavaScript結(jié)合css的定位技術(shù)實現(xiàn)下拉菜單的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
生命周期是指一個對象從創(chuàng)建→>運行>銷毀的整個階段，強調(diào)的是一個時間段，文中介紹了小程序中組件的生命周期，需要的朋友可以參考下2023-03-03