国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js實現左側菜單欄遞歸循環遍歷

CoyPan / 2679人閱讀

摘要：首先布局菜單首頁按鈕彈框通知提醒全局頁簽圖片畫廊輪播圖表單登錄注冊表格基礎表格高級表格富文本城市管理訂單管理訂單詳情結束訂單員工管理車輛地圖圖標柱形圖餅圖折線圖權限設置邏輯最后樣式圖片描述沒有寫樣式簡易版本的菜單欄

首先html布局


菜單json
const menuList = [

    {
        title: "首頁",
        key: "/home"
    },
    {
        title: "UI",
        key: "/ui",
        children: [
            {
                title: "按鈕",
                key: "/ui/buttons",
            },
            {
                title: "彈框",
                key: "/ui/modals",
            },
            {
                title: "Loading",
                key: "/ui/loadings",
            },
            {
                title: "通知提醒",
                key: "/ui/notification",
            },
            {
                title: "全局Message",
                key: "/ui/messages",
            },
            {
                title: "Tab頁簽",
                key: "/ui/tabs",
            },
            {
                title: "圖片畫廊",
                key: "/ui/gallery",
            },
            {
                title: "輪播圖",
                key: "/ui/carousel",
            }
        ]
    },
    {
        title: "表單",
        key: "/form",
        children: [
            {
                title: "登錄",
                key: "/form/login",
            },
            {
                title: "注冊",
                key: "/form/reg",
            }
        ]
    },
    {
        title: "表格",
        key: "/table",
        children: [
            {
                title: "基礎表格",
                key: "/table/basic",
            },
            {
                title: "高級表格",
                key: "/table/high",
            }
        ]
    },
    {
        title: "富文本",
        key: "/rich"
    },
    {
        title: "城市管理",
        key: "/city"
    },
    {
        title: "訂單管理",
        key: "/order",
        btnList: [
            {
                title: "訂單詳情",
                key: "detail"
            },
            {
                title: "結束訂單",
                key: "finish"
            }
        ]
    },
    {
        title: "員工管理",
        key: "/user"
    },
    {
        title: "車輛地圖",
        key: "/bikeMap"
    },
    {
        title: "圖標",
        key: "/charts",
        children: [
            {
                title: "柱形圖",
                key: "/charts/bar"
            },
            {
                title: "餅圖",
                key: "/charts/pie"
            },
            {
                title: "折線圖",
                key: "/charts/line"
            },
        ]
    },
    {
        title: "權限設置",
        key: "/permission"
    },
];

js邏輯
var ul="";

function appednMenu(data) {
    data.forEach(function (item,index) {
        if(item.children){
            ul+="
  • "+item.title+"
      "
                    appednMenu(item.children);
            ul+="
    • ";
        }else {
            ul+="
  • "+item.title+"
    • "
        }
    })
}
appednMenu(menuList);
console.log(ul);
document.getElementById("abc").innerHTML=ul
最后樣式
![圖片描述][1]

    沒有寫樣式 簡易版本的菜單欄

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105065.html

    相關文章

    • 尚學堂 react -后臺管理系統開發流程

      摘要：項目開發準備描述項目技術選型接口接口文檔測試接口啟動項目開發使用腳手架創建項目開發環境運行生產環境打包運行管理項目創建遠程倉庫創建本地倉庫配置將本地倉庫推送到遠程倉庫在本地創建分支并推送到遠程如果本地有修改新的同事克隆倉庫如果遠程修 day01 1. 項目開發準備 1). 描述項目 2). 技術選型 3). API接口/接口文檔/測試接口 2. 啟動項目開發 1). 使用react...

      lemon 評論0 收藏0

    • .each()循環遍歷子元素，對比已有元素，避免重復

      摘要：以前寫循環遍歷習慣性用，但是這次突然覺著無從下手了。規定為每個匹配元素規定運行的函數。該字符串可以是直接包含在元素中的文本，或者被包含于子元素中。 以前寫循環遍歷習慣性用 for(){}，但是這次突然覺著無從下手了。 場景一：左側九宮格菜單（顯示欄），需要遍歷獲取每個菜單的id，然后放到數組里。 下面是要遍歷的HTML代碼： ...

      浠ラ箍 評論0 收藏0

    • .each()循環遍歷子元素，對比已有元素，避免重復

      摘要：以前寫循環遍歷習慣性用，但是這次突然覺著無從下手了。規定為每個匹配元素規定運行的函數。該字符串可以是直接包含在元素中的文本，或者被包含于子元素中。 以前寫循環遍歷習慣性用 for(){}，但是這次突然覺著無從下手了。 場景一：左側九宮格菜單（顯示欄），需要遍歷獲取每個菜單的id，然后放到數組里。 下面是要遍歷的HTML代碼： ...

      dinfer 評論0 收藏0

    • EasyUI項目之門戶書籍、類別查詢、圖片上傳

      摘要：前言繼續上一篇講解項目網上書城之門戶書籍類別查詢圖片上傳碼字不易，點個關注轉載請說明開發工具，目錄一目標一目標二具體思路以及代碼，效果展示二具體思路以及代碼，效果展示一顯示菜單欄一顯示菜單欄二點擊左側菜單欄，出現對應的書 前言：繼續上一篇講解EasyUi項目《網上書城》之門戶書籍、類別查詢、...

      OpenDigg 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <