js實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果

更新時(shí)間：2018年11月22日 11:22:52 作者：靜遇。

這篇文章主要介紹了js實(shí)現(xiàn)按鈕開關(guān)單機(jī)下拉菜單效果，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

通過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)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript異步操作的方法小結(jié)
在現(xiàn)代Web開發(fā)中,異步編程是不可或缺的一部分,JavaScript通過多種方式支持異步操作,允許開發(fā)者處理非阻塞代碼執(zhí)行,從而提高應(yīng)用性能和響應(yīng)速度,本文給大家介紹了JavaScript異步操作的常見方法,需要的朋友可以參考下
2025-01-01
JS替換字符串中字符即替換全部而不是第一個(gè)
用JS替換字符串時(shí)。只能替換掉字符串中第一個(gè)aa,有時(shí)候需要替換全部的aa，下文是具體的實(shí)現(xiàn)方法，大家可以參考下
2014-06-06
JavaScript 異常處理詳解
這篇文章主要介紹了JavaScript 異常處理詳解,需要的朋友可以參考下
2015-02-02
使用JavaScript判斷一個(gè)元素是否在可視范圍內(nèi)的幾種方法
在Web開發(fā)中,有時(shí)我們需要知道一個(gè)元素是否在用戶的可視范圍內(nèi),以便執(zhí)行相應(yīng)的操作,比如延遲加載圖片、實(shí)現(xiàn)懶加載、或是觸發(fā)動(dòng)畫效果, 本文將詳細(xì)介紹使用 JavaScript 如何判斷一個(gè)元素是否在可視范圍內(nèi)的幾種方法,需要的朋友可以參考下
2024-02-02
JavaScript數(shù)據(jù)類型檢測代碼分享
這篇文章主要向大家分享了一段JavaScript實(shí)現(xiàn)數(shù)據(jù)類型檢測的代碼，附上參數(shù)說明和使用說明，希望小伙伴們能夠喜歡
2015-01-01
Ajax請(qǐng)求時(shí)無法重定向的問題解決代碼詳解
這篇文章主要介紹了Ajax請(qǐng)求時(shí)無法重定向的問題解決代碼詳解，當(dāng)使用Ajax請(qǐng)求時(shí)，如果后臺(tái)進(jìn)行重定向到其他頁面時(shí)是無法成功的，只能在瀏覽器地址欄輸入才能夠?qū)崿F(xiàn)重定向。下面我們來看看解決方法吧
2019-06-06
通過掃小程序碼實(shí)現(xiàn)網(wǎng)站登陸功能
這篇文章主要介紹了通過掃小程序碼實(shí)現(xiàn)網(wǎng)站登陸功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08
ES6新增的數(shù)組知識(shí)實(shí)例小結(jié)
這篇文章主要介紹了ES6新增的數(shù)組知識(shí),結(jié)合實(shí)例形式分析了ES6的數(shù)組新增知識(shí)點(diǎn)、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JavaScript股票的動(dòng)態(tài)買賣規(guī)劃實(shí)例分析下篇
這篇文章主要介紹了JavaScript對(duì)于動(dòng)態(tài)規(guī)劃解決股票問題的真題例舉講解。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Bun運(yùn)行時(shí)是新一代高性能JavaScript/TypeScript運(yùn)行時(shí)
Bun由Jarred Sumner創(chuàng)建,是一款新興的JavaScript和TypeScript運(yùn)行時(shí),旨在比Node.js和Deno提供更高性能和快速啟動(dòng),Bun使用Zig語言編寫,內(nèi)置包管理并支持Node.js大部分API,適用于高并發(fā)API服務(wù)和快速構(gòu)建工具
2024-11-11