快捷導(dǎo)航

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

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

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

通過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)單機(jī)下拉菜單效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

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