模板语法套用html产物示例
<!-- item 系：模块子菜单（Column 下拉） --> <{item=>$module,$backitem}> <!-- 产物结构： <div class="ut-item-menu"> <a class="ut-item-link">Column</a> <div class="ut-item-menu-small"> <a class="ut-item-link-samll" href="...">表管理</a>... </div> </div> --> <!-- tree 系：分类树形菜单（datatree mode=2 管理视图） --> <{datatree=>2,...}> <!-- 产物结构（每行）： <div class="ut-tree-menu"> <div class="ut-tree-left" data-id="$id" data-name="$name">$spacer$name</div> <div class="ut-tree-right"> <a id="ut-tree-mon" class="mr-2" href="...?id=$id&do=mon">Edit</a> <a id="ut-tree-del" href="...?id=$id&do=del">Del</a> </div> </div> -->

css示例
/* ===== item 系：Column 下拉 ===== */ .ut-item-menu{position:relative;display:inline-block;} .ut-item-link{cursor:pointer;user-select:none;} /* 面板默认隐藏，右对齐向左展开（防页面右缘溢出） */ .ut-item-menu-small{display:none;position:absolute;right:0;top:100%;z-index:1000; min-width:8rem;padding:.5rem 0;margin:.125rem 0 0;background:#fff; border:1px solid rgba(0,0,0,.15);border-radius:.25rem; box-shadow:0 .5rem 1rem rgba(0,0,0,.175);} .ut-item-menu.show .ut-item-menu-small{display:block;} /* 条目：官方拼写就是 samll，顺手兼容正确拼写 small */ .ut-item-menu-small .ut-item-link-samll, .ut-item-menu-small .ut-item-link-small{display:block;width:100%;padding:.25rem 1rem; clear:both;font-weight:400;color:#212529;text-align:left; text-decoration:none;white-space:nowrap;background:none;border:0;} .ut-item-menu-small .ut-item-link-samll:hover, .ut-item-menu-small .ut-item-link-small:hover{color:#16181b;text-decoration:none;background:#f8f9fa;} /* ===== tree 系：树形行（左名称右按钮） ===== */ .ut-tree-menu{display:flex;align-items:flex-start;justify-content:space-between; margin-bottom:15px;font-size:14px;} /* 名称区弹性伸展：$spacer 层级缩进天然保留，长名称省略号不挤压按钮 */ .ut-tree-left{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ut-tree-right{flex:0 0 auto;white-space:nowrap;} .ut-tree-right a{color:#6c757d;text-decoration:none;} .ut-tree-right a:hover{color:#212529;text-decoration:underline;}

模块子菜单js示例
// 点击触发字：互斥开关本菜单 $(document).on("click",".ut-item-link",function(e){ e.stopPropagation(); var $menu=$(this).closest(".ut-item-menu"); $(".ut-item-menu.show").not($menu).removeClass("show"); $menu.toggleClass("show"); }); // 点击菜单内链接：先收起再跳转 $(document).on("click",".ut-item-menu-small a",function(){ $(this).closest(".ut-item-menu").removeClass("show"); }); // 点击页面其它位置：全部收起 $(document).on("click",function(){ $(".ut-item-menu.show").removeClass("show"); }); // ESC：全部收起 $(document).on("keydown",function(e){ if(e.key==="Escape"){$(".ut-item-menu.show").removeClass("show");} });