Layui tree 下拉菜單樹(shù)的實(shí)例代碼
1.效果:
2.html 代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" media="all"> <!-- 注意:如果你直接復(fù)制所有代碼到本地,上述css路徑需要改成你本地的 --> <style type="text/css"> .downpanel .layui-select-title span { line-height: 38px; } /*繼承父類顏色*/ .downpanel dl dd:hover { background-color: inherit; } </style> <style type="text/css"> body { height: 100%; width: 100%; background-size: cover; margin: 0 auto; } td { font-size: 12px !important; } .layui-form-checkbox span { height: 30px; } .layui-field-title { border-top: 1px solid white; } table { width: 100% !important; } </style> </head> <body> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">文章欄目</label> <div class="layui-input-inline"> <div class="layui-unselect layui-form-select downpanel"> <div class="layui-select-title"> <span class="layui-input layui-unselect" id="treeclass">選擇欄目</span> <input type="hidden" name="selectID" value="0"> <i class="layui-edge"></i> </div> <dl class="layui-anim layui-anim-upbit"> <dd> <ul id="classtree"></ul> </dd> </dl> </div> </div> </div> </form> <script src="static/layui/layui.js" charset="utf-8"></script> <!-- 注意:如果你直接復(fù)制所有代碼到本地,上述js路徑需要改成你本地的 --> <script type="text/javascript"> layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () { var $ = layui.jquery, tree = layui.tree; tree({ elem: "#classtree" , nodes: [{ name: '常用文件夾', id: 1, alias: 'changyong', children: [{name: '所有未讀', id: 11, href: 'http://www.layui.com/', alias: 'weidu'}, { name: '置頂郵件', id: 12 }, {name: '標(biāo)簽郵件', id: 13}] }, { name: '我的郵箱', id: 2, spread: true, children: [{ name: 'QQ郵箱', id: 21, spread: true, children: [{ name: '收件箱', id: 211, children: [{name: '所有未讀', id: 2111}, {name: '置頂郵件', id: 2112}, {name: '標(biāo)簽郵件', id: 2113}] }, {name: '已發(fā)出的郵件', id: 212}, {name: '垃圾郵件', id: 213}] }, { name: '阿里云郵', id: 22, children: [{name: '收件箱', id: 221}, {name: '已發(fā)出的郵件', id: 222}, {name: '垃圾郵件', id: 223}] }] }] , click: function (node) { var $select = $($(this)[0].elem).parents(".layui-form-select"); $select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id); } }); $(".downpanel").on("click", ".layui-select-title", function (e) { $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected"); $(this).parents(".downpanel").toggleClass("layui-form-selected"); layui.stope(e); }).on("click", "dl i", function (e) { layui.stope(e); }); $(document).on("click", function (e) { $(".layui-form-select").removeClass("layui-form-selected"); }); }); </script> </body> </html> </body> </html>
以上這篇Layui tree 下拉菜單樹(shù)的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻
這篇文章主要為大家詳細(xì)介紹了小程序點(diǎn)擊圖片實(shí)現(xiàn)自動(dòng)播放視頻,停止上一個(gè)視頻播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Javascript實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)導(dǎo)航智能定位
本篇文章主要介紹了Javascript實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)導(dǎo)航智能定位,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)播放器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)播放器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09跟我學(xué)習(xí)javascript解決異步編程異常方案
跟我學(xué)習(xí)javascript解決異步編程異常方案,感興趣的小伙伴們可以參考一下2015-11-11javascript showModalDialog 內(nèi)跳轉(zhuǎn)頁(yè)面的問(wèn)題
在頁(yè)面中使用了showModalDialog,但是在跳轉(zhuǎn)鏈接時(shí),不會(huì)在當(dāng)前頁(yè)執(zhí)行,而是彈出一個(gè)新的頁(yè)面。2010-11-11JavaScript統(tǒng)計(jì)數(shù)組中相同的數(shù)量的方法總結(jié)
在JavaScript中,我們經(jīng)常需要對(duì)數(shù)組中對(duì)象的屬性進(jìn)行統(tǒng)計(jì)。在本文中,我們將介紹如何使用JavaScript來(lái)實(shí)現(xiàn)這一功能,文中有詳細(xì)的代碼示例,需要的朋友可以借鑒參考2023-05-05微信小程序五星評(píng)分效果實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序五星評(píng)分效果實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST
本文將通過(guò)不同的示例解釋如何使用JavaScript代碼在AJAX編程中發(fā)送 XMLHttpRequest post 請(qǐng)求,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-07-07js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)城市級(jí)聯(lián)菜單的2種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06