-
2021/3/3 3月
VS 使用 IIS Express 同时调试 http 与 https（SSL）
如果 http 与 https 使用相同的端口号会导致 IIS Express 无法启动
更换不同端口号即可：
在项目文件右键属性，“调试”选项卡中配置。
Tip：修改完以后要保存，否则不会生效。
另外，如果要允许 http 访问，那么 Startup.cs 的 Configure 方法中就不能 app.UseHttpsRedirection();
-
2021/2/22 2月
MySql.Data.EntityFramework 如何降级到 8.0.19
喜欢“数据库优先”的朋友会发现，一旦 nuget 中将 MySql.Data 与 MySql.Data.EntityFramework 升级到版本超过 8.0.19，将无法正常打开 .edmx 文件进行从数据库更新模型。这个问题从 8.0.20 开始出现，在经过等待试验后续多个更新版本后，笔者认为 Oracle 官方不会再针对 8.0.20 及以后的版本支持可视化更新实体模型。
于是面临两个选择：退回到 8.0.19 版本，或使用其它数据库连接组件（如 Pomelo）。
使用其它组件将会更改映射的属性名称，对 Include 延时加载等机制也会发生改变，对于代码量比较大的项目修改成本还是比较大的。那么用回 8.0.19 呢？
在服务器上卸载 8.0.20+ 版本的 mysql-connector-net，安装 8.0.19 版本，重启 IIS 或重启服务器。
项目中，MySql.Data 与 MySql.Data.EntityFramework 也降至 8.0.19，发布后发现，仍然提示：
未能加载文件或程序集“MySql.Data.EntityFramework, Version=8.0.19.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
几个月来，我一直认为是服务器上的高版本 mysql-connector-net 没有卸载干净，今天才发现原因是新发布的项目 bin 目录中的 MySql.Data.EntityFramework.dll 版本号仍然高于 8.0.19。手动替换成 8.0.19 后可正常访问。
既然 NuGet 已经将 MySql.Data.EntityFramework 的版本降至 8.0.19，而且 web.config 中所有的版本号也都一致，解决方案的 packages 目录下的也只有 MySql.Data.EntityFramework.8.0.19 这一个版本，甚至连项目源代码中的 bin 目录下的该文件版本也是 8.0.19，可发布后的 MySql.Data.EntityFramework.dll 版本却仍高于 8.0.19？
于是在解决方案中找到以下路径：
\obj\Release\Package\PackageTmp\bin\MySql.Data.EntityFramework.dll
重新发布时，这个文件并没有按照 NuGet 中的版本来覆盖，因此只需要在发布前删除整个 \obj\ 目录再次发布即可解决问题。
-
2021/2/17 2月
The view was not found
fail: Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor[3]
The view 'Index' was not found. Searched locations: /Areas/AAA/Views/XXX/Index.cshtml, /Areas/AAA/Views/Shared/Index.cshtml, /Views/Shared/Index.cshtml
fail: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[1]
An unhandled exception has occurred while executing the request.
System.InvalidOperationException: The view 'Index' was not found. The following locations were searched:
/Areas/AAA/Views/XXX/Index.cshtml
/Areas/AAA/Views/Shared/Index.cshtml
/Views/Shared/Index.cshtml
开发环境一切正常，发布到服务器上出现上述错误，找不到视图文件，可视图文件明明就存在。
尝试新建一个文件，将 Index.cshtml 文件的内容拷贝到新文件中保存，删除原文件，将新文件改名为 Index.cshtml，发布，OK。
-
2021/2/14 2月
Entity Framework Core 5.0 直接执行 SQL 语句
“DatabaseFacade”未包含“ExecuteSqlCommand”的定义，并且找不到可接受第一个“DatabaseFacade”类型参数的可访问扩展方法“ExecuteSqlCommand”(是否缺少 using 指令或程序集引用?)
思路：（以 Entity Framework Core 5.0 为例）
先借用 SELETE 的 IQueryable 语句，将 SELETE 关键字替换成 DELETE，再使用 FromSqlRaw 执行。这样可准确使用真实的数据库表名和字段名。
如：
using Microsoft.EntityFrameworkCore;
string sql = db.表.Where(c => c.Date < minDate).ToQueryString(); sql = Regex.Replace(sql, @"SELECT\s.*?\sFROM", "DELETE FROM", RegexOptions.Singleline); // SET @__minDate_0 = '2020-01-14'; DELETE FROM `表` AS `d` WHERE `d`.`Date` < @__minDate_0 sql = Regex.Replace(sql, @"\sAS\s`(.*?)`", "", RegexOptions.Singleline); // SET @__minDate_0 = '2020-01-14'; DELETE FROM `表` WHERE `d`.`Date` < @__minDate_0 sql = Regex.Replace(sql, @"`([^`]*?)`\.`", "`", RegexOptions.Singleline); // SET @__minDate_0 = '2020-01-14'; DELETE FROM `表` WHERE `Date` < @__minDate_0 db.Database.ExecuteSqlRaw(sql);
以上例子针对 MySQL，且未考虑字符串内容中包含符号 ` 的情况。实例操作中应严格防范 SQL 注入。
封装成方法：
using Microsoft.EntityFrameworkCore; const RegexOptions ro = RegexOptions.Singleline; /// <summary> /// 组装一个 DELETE SQL 语句 /// </summary> /// <typeparam name="T">数据库表实体类</typeparam> /// <param name="queryableWithConditions">IQueryable，可带筛选条件</param> /// <returns></returns> public static string AssembleDeleteSql<T>(IQueryable<T> queryableWithConditions) where T : class { // MySQL 版 string sql = queryableWithConditions.ToQueryString(); // SET @__minDate_0 = '2020-01-14'; SELECT `d`.`Date`, `d`.`Code6` FROM `表` AS `d` WHERE `d`.`Date` < @__minDate_0 sql = Regex.Replace(sql, @"SELECT\s.*?\sFROM", "DELETE FROM", ro); // SET @__minDate_0 = '2020-01-14'; DELETE FROM `表` AS `d` WHERE `d`.`Date` < @__minDate_0 sql = Regex.Replace(sql, @"\sAS\s`(.*?)`", "", ro); // SET @__minDate_0 = '2020-01-14'; DELETE FROM `表` WHERE `d`.`Date` < @__minDate_0 sql = Regex.Replace(sql, @"`([^`]*?)`\.`", "`", ro); // SET @__minDate_0 = '2020-01-14'; DELETE FROM `表` WHERE `Date` < @__minDate_0 return sql; } /// <summary> /// 组装一个 UPDATE SQL 语句 /// </summary> /// <typeparam name="T">数据库表实体类</typeparam> /// <param name="queryableWithConditions">IQueryable，可带筛选条件</param> /// <param name="columnsAndValues">需要更改的字段和值</param> /// <returns></returns> public static string AssembleUpdateSql<T>(IQueryable<T> queryableWithConditions, Dictionary<string, object> columnsAndValues) where T : class { // MySQL 版 string sql = queryableWithConditions.ToQueryString(); // SET @__minDate_0 = '2020-01-14'; SELECT `d`.`Date`, `d`.`Code6` FROM `表` AS `d` WHERE `d`.`Date` < @__minDate_0 sql = Regex.Replace(sql, @"SELECT\s.*?\sFROM", "UPDATE", ro); // SET @__minDate_0 = '2020-01-14'; UPDATE `表` AS `d` WHERE `d`.`Date` < @__minDate_0 sql = Regex.Replace(sql, @"\sAS\s`(.*?)`", "", ro); // SET @__minDate_0 = '2020-01-14'; UPDATE `表` WHERE `d`.`Date` < @__minDate_0 sql = Regex.Replace(sql, @"`([^`]*?)`\.`", "`", ro); // SET @__minDate_0 = '2020-01-14'; UPDATE `表` WHERE `Date` < @__minDate_0 string sets = string.Join(",", columnsAndValues.Select(c => $"`{c.Key.Replace("`", @"\`")}` = '{c.Value.ToString().Replace("'", @"\'")}'")); sql = Regex.Replace(sql, @"`\s*WHERE", $"` SET {sets} WHERE", ro); // SET @__minDate_0 = '2020-01-14'; UPDATE `表` SET `field1` = 'value1', `field2` = 'value2' WHERE `Date` < @__minDate_0 return sql; }调用示例：
using Microsoft.EntityFrameworkCore; // 删除记录 DateTime minDate = DateTime.Today.AddYears(-1).AddMonths(-1); string sql = AssembleDeleteSql(db.表.Where(c => c.Date < minDate)); db.Database.ExecuteSqlRaw(sql); // 更新记录 var sets = new Dictionary<string, object>(); foreach (var p in db.Model.FindEntityType(typeof(表)).GetProperties()) { switch (p.Name) { case nameof(表.字段一): sets.Add(p.GetColumnBaseName(), 123); break; case nameof(表.字段二): sets.Add(p.GetColumnBaseName(), 456); break; } } DateTime minDate = DateTime.Today.AddYears(-1).AddMonths(-1); string sql = AssembleUpdateSql(db.表.Where(c => c.Date < minDate), sets); db.Database.ExecuteSqlRaw(sql); -
2021/2/1 2月
Substring 简写，使用范围运算符
C# 中对 str.Substring(n)，可以用广括号和点点简写为：str[n..]
string str = "中华人民共和国"; return Json(new { a = str[..2], // "中华"，同 str.Substring(0, 2) b = str[2..], // "人民共和国"，同 str.Substring(2) c = str[2..2], // ""，不同于 str.Substring(2, 2) }); -
2021/1/23 1月
局域网共享网络打印机
场景：
打印机只有 USB 接口，没有网线接口。
方案：
使用一台电脑连接打印机，并共享给局域网其它电脑。
将连接打印机的电脑称为服务端，局域网其它电脑称为客户端。
使用 Windows 7 作服务端比使用 Windows 10 更容易设置成功。
以下过程以使用 Windows 7 作服务端为例，Windows 10 的操作稍有不同。
服务端：
安装打印机驱动，打印测试页成功。
在“设备和打印机”界面选中该打印机，右键属性，切换到“共享”，共享这台打印机。
在“计算机管理”中打开“用户”，点击 Guest 属性，将“帐户已禁用”前的勾去掉。
打开“本地安全策略”（命令：secpol.msc），在 安全设置-本地策略-用户权限分配 中选中“拒绝从网络访问这台计算机”，将“Guest”用户删除。
将“睡眠”关闭
客户端
打开“我的电脑”或“计算机”或“此电脑”，点击菜单中的“网络”
双击打开打印机所在的计算机（或直接在地址栏输出入“\\192.168.1.*”即打印机所在的计算机的 IP 地址）
正常情况下，打开后显示打印机图标，右键点击“连接”后安装驱动即可正常使用。
如果提示以下错误 0x80070035
修改相应的注册表（命令：regedit）的
AllowInsecureGuestAuth值为 1。
如果“网络”中不显示该计算机图标，那么，我还不知道怎么搞。
-
2020/12/26 12月
The requested URL returned error: 404 Not Found
[root ~]# yum update xxx Loaded plugins: security Setting up Update Process http://mirrors.aliyun.com/centos/6/os/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 - "The requested URL returned error: 404 Not Found" Trying other mirror. To address this issue please refer to the below wiki article https://wiki.centos.org/yum-errors If above article doesn't help to resolve this issue please use https://bugs.centos.org/. http://mirrors.aliyuncs.com/centos/6/os/x86_64/repodata/repomd.xml: [Errno 12] Timeout on http://mirrors.aliyuncs.com/centos/6/os/x86_64/repodata/repomd.xml: (28, 'connect() timed out!') Trying other mirror. http://mirrors.cloud.aliyuncs.com/centos/6/os/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 - "The requested URL returned error: 404 Not Found" Trying other mirror. Error: Cannot retrieve repository metadata (repomd.xml) for repository: base. Please verify its path and try again
售后工程师:
您好，CentOS 6 已经停止技术支持通知 新购实例或者旧有的Centos 6 操作系统会导致yum安装失败，相关公告请见下面内容；
这边建议您考虑将数据备份一下，升级至Centos 7 版本。如果一定要使用，需要手动切换源，您可以将由原的yum 源做下备份，对/etc/yum.repos.d 内容进行清空处理，然后参考下面的教程做下源的更换处理。
有其他咨询，您继续反馈
简言之，对照自己的版本号，将文件 /etc/yum.repos.d/CentOS-Base.repo 与 /etc/yum.repos.d/epel.repo 的内容替换成教程中的内容即可。
-
2020/12/21 12月
ASP.NET EF Core 5 获取数据库字段名
using Microsoft.EntityFrameworkCore; var entityType = _context.Model.FindEntityType(typeof(表实体)); var dic = new Dictionary<string, string>(); foreach (var p in entityType.GetProperties()) { dic.Add(p.Name, p.GetColumnBaseName()); } -
2020/12/16 12月
不买高防 IP，照样抵挡 DDoS 攻击
【阿里云】尊敬的@aliyun.com：为了保障服务器的稳定运行，您的IP: 实例名称： 已启动限流保护措施。阈值与产品规格相关，您可以登录云盾控制台调整清洗阈值，若超出调整范围请提交售后工单反馈或电话95187-1进行咨询。
【阿里云】尊敬的@aliyun.com：您的IP: 受到攻击流量已超过云盾DDoS基础防护的带宽峰值，服务器的所有访问已被屏蔽，如果300分钟后攻击停止将自动解除否则会延期解除。详情请登录【云盾控制台】-【DDoS基础防护】查看或致电95187-1进行咨询。
恭喜，你的 ECS 服务器受到 DDoS 攻击了。这个时候，工单客服和电话客服都会极力推销高防 IP 这个产品（DDoS高防（新BGP）），为了抵挡一年才会遇到几分钟的攻击，咱们还是选择更为经济的方式来解决攻击这个问题吧。
ECS 等产品都会自带流量清洗这个功能，在阈值范围内的攻击流量会免费处理掉，超过阈值就把 ECS 拉入黑洞，以防止同机房的其它服务受到影响。一般攻击才持续 5~20 分钟，关小黑屋就等 5 个小时，谁比较黑。
既然受攻击的是 ECS 公网 IP，那么我们可以借用负载均衡（SLB）使用 ECS 的私网 IP 来请求业务。
初期可以创建一个按量付费的 SLB，熟悉费用后可再次调整。选择“私网”（文末解释为什么不选择“公网”）
服务地址绑定到 ECS，按业务需求添加监听端口：
此时，SLB 已经和 ECS 打通了，但是这个私网 SLB 并没有公网 IP，所以继续购买一个叫弹性公网 IP （EIP）的产品，用于打通公网与私网。同样初期选择按量付费。
将 SLB 与 EIP 绑定（各自的管理界面都有相关操作入口）。
最后，将域名解析到 EIP 即可，顺便将 TTL 改为最小值。
解析生效后，外部的请求通过 EIP 到 SLB 再到 ECS 的私网 IP 访问成功，但 ECS 主动的出流量仍然通过其公网 IP 流出，在黑洞期间相关的操作仍然会失败（如上传文件到外部图床），这个等后续遇到再补充解决方案。
一旦 DDoS 改为攻击 EIP，那么只要重新创建一个新的 EIP，将 SLB 绑定到该新的 EIP，并解析域名即可。
既然本例的 SLB 是私网到私网的，是不是可以省去 SLB，由 EIP 直接到 ECS？
经实践证明，EIP 绑定 ECS 会提示 ECS 已存在公网 IP，无法绑定。而且，带宽计费方式为按固定带宽的包年包月实例，不支持将公网 IP 转换为弹性公网 IP。
SLB 为什么不选择“公网”？
本方案仅为临时防止 DDoS 攻击，所以一旦再次受到攻击需要立即做出反应，而 SLB 的配置相对于 EIP 会更为复杂，所以我们选择新建 EIP 的方式来代替新建公网 SLB。费用方面，私网 SLB 没有流量费用，EIP 的流量费用与公网 SLB 相同，所以两种方案的费用是相差不大的。
最后，推荐使用阿里云 SDK 通过 API 接口来实现一键部署/更换 EIP 功能。
进阶功能：使用接口 DescribeEipAddresses 判断 EIP 的 LockReason 状态是否为 security，若是则自动切换 EIP，实现无人值守全自动防 DDoS。
-
2020/12/14 12月
Metronic 之菜单
.menu-nav 包裹
<ul class="menu-nav"> ... </ul>
.menu-section 区段
<li class="menu-section"> <h4 class="menu-text">区段</h4> <i class="menu-icon ki ki-bold-more-hor icon-md"></i> </li>
.menu-item 菜单
<li class="menu-item" aria-haspopup="true"> <a href="###" class="menu-link"> <span class="svg-icon menu-icon"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <rect x="0" y="0" width="24" height="24" /> <path d="M3,16 L5,16 C5.55228475,16 6,15.5522847 6,15 C6,14.4477153 5.55228475,14 5,14 L3,14 L3,12 L5,12 C5.55228475,12 6,11.5522847 6,11 C6,10.4477153 5.55228475,10 5,10 L3,10 L3,8 L5,8 C5.55228475,8 6,7.55228475 6,7 C6,6.44771525 5.55228475,6 5,6 L3,6 L3,4 C3,3.44771525 3.44771525,3 4,3 L10,3 C10.5522847,3 11,3.44771525 11,4 L11,19 C11,19.5522847 10.5522847,20 10,20 L4,20 C3.44771525,20 3,19.5522847 3,19 L3,16 Z" fill="#000000" opacity="0.3" /> <path d="M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,15.2485298 C21,15.7329761 20.8241635,16.200956 20.5051534,16.565539 L17.8762883,19.5699562 C17.6944473,19.7777745 17.378566,19.7988332 17.1707477,19.6169922 C17.1540423,19.602375 17.1383289,19.5866616 17.1237117,19.5699562 L14.4948466,16.565539 C14.1758365,16.200956 14,15.7329761 14,15.2485298 L14,5 C14,3.8954305 14.8954305,3 16,3 Z" fill="#000000" /> </g> </svg> </span> <span class="menu-text">一级菜单（无子菜单）</span> </a> </li>
其中，<svg /> 可以替换成其它图标库，如：
<li class="menu-item" aria-haspopup="true"> <a href="###" class="menu-link"> <span class="svg-icon menu-icon"> <i class="fab fa-app-store-ios"></i> </span> <span class="menu-text">一级菜单（无子菜单）</span> </a> </li>
并修正样式：
.aside-menu .menu-nav > .menu-item > .menu-heading .menu-icon i, .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon i { height: 23px; width: 23px; line-height: 23px; text-align: center; vertical-align: middle; font-size: 1.25rem; }.menu-item-submenu 表示该 .menu-item 有子菜单，即内部包含 .menu-submenu。该规则在任意一级菜单均有效。
.menu-item-open 表示该 .menu-item 当前是打开状态（高亮），否则为闭合状态，需配合 <i class="menu-arrow"></i> 使用。该规则在任意一级菜单均有效。
.menu-item-active 表示该 .menu-item 对应当前页面，效果为灰色背景且文字持续高亮。
.menu-item-parent 作为一级菜单在不同设备上展示的替代，位于一级菜单下的 .menu-submenu 下的 .menu-subnav 内部。
.menu-link 表示可点击（hover 效果），用于 .menu-item 下的 <a /> 或 .menu-item-parent 下的 <span />。
aria-haspopup="true" 每个 .menu-item 都有。
data-menu-toggle="hover" 每个 .menu-item-submenu 都有。
.menu-icon 一级菜单项的左侧图标，支持 <svg /> 或 <i />。
.menu-bullet 非一级菜单项的左侧图标，与 .menu-text 同级，可选 .menu-bullet-line / .menu-bullet-dot。
.menu-text 菜单文字。
.menu-label 菜单项右侧徽章，与 .menu-text 同级。
.menu-arrow 菜单项右侧箭头（当包含子菜单时使用），与 .menu-text 同级。
.menu-toggle 放在 .menu-item-submenu 内部的 .menu-link，与 .menu-item-submenu 上的 data-menu-toggle="hover" 同时出现。
完整示例：
<ul class="menu-nav"> <li class="menu-item" aria-haspopup="true"> <a href="index.html" class="menu-link"> <span class="svg-icon menu-icon"> <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Layers.svg--> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <polygon points="0 0 24 0 24 24 0 24" /> <path d="M12.9336061,16.072447 L19.36,10.9564761 L19.5181585,10.8312381 C20.1676248,10.3169571 20.2772143,9.3735535 19.7629333,8.72408713 C19.6917232,8.63415859 19.6104327,8.55269514 19.5206557,8.48129411 L12.9336854,3.24257445 C12.3871201,2.80788259 11.6128799,2.80788259 11.0663146,3.24257445 L4.47482784,8.48488609 C3.82645598,9.00054628 3.71887192,9.94418071 4.23453211,10.5925526 C4.30500305,10.6811601 4.38527899,10.7615046 4.47382636,10.8320511 L4.63,10.9564761 L11.0659024,16.0730648 C11.6126744,16.5077525 12.3871218,16.5074963 12.9336061,16.072447 Z" fill="#000000" fill-rule="nonzero" /> <path d="M11.0563554,18.6706981 L5.33593024,14.122919 C4.94553994,13.8125559 4.37746707,13.8774308 4.06710397,14.2678211 C4.06471678,14.2708238 4.06234874,14.2738418 4.06,14.2768747 L4.06,14.2768747 C3.75257288,14.6738539 3.82516916,15.244888 4.22214834,15.5523151 C4.22358765,15.5534297 4.2250303,15.55454 4.22647627,15.555646 L11.0872776,20.8031356 C11.6250734,21.2144692 12.371757,21.2145375 12.909628,20.8033023 L19.7677785,15.559828 C20.1693192,15.2528257 20.2459576,14.6784381 19.9389553,14.2768974 C19.9376429,14.2751809 19.9363245,14.2734691 19.935,14.2717619 L19.935,14.2717619 C19.6266937,13.8743807 19.0546209,13.8021712 18.6572397,14.1104775 C18.654352,14.112718 18.6514778,14.1149757 18.6486172,14.1172508 L12.9235044,18.6705218 C12.377022,19.1051477 11.6029199,19.1052208 11.0563554,18.6706981 Z" fill="#000000" opacity="0.3" /> </g> </svg> <!--end::Svg Icon--> </span> <span class="menu-text">Dashboard</span> </a> </li> <li class="menu-section"> <h4 class="menu-text">区段 A（一级菜单示例）</h4> <i class="menu-icon ki ki-bold-more-hor icon-md"></i> </li> <li class="menu-item" aria-haspopup="true"> <a href="item1" class="menu-link"> <span class="svg-icon menu-icon"> <i class="fas fa-dice-one"></i> </span> <span class="menu-text">菜单 A</span> </a> </li> <li class="menu-item" aria-haspopup="true"> <a href="item2" class="menu-link"> <span class="svg-icon menu-icon"> <i class="fas fa-dice-two"></i> </span> <span class="menu-text">菜单 B（带徽章）</span> <span class="menu-label"> <span class="label label-rounded label-primary">6</span> </span> </a> </li> <li class="menu-item menu-item-active" aria-haspopup="true"> <a href="item2" class="menu-link"> <span class="svg-icon menu-icon"> <i class="fas fa-dice-three"></i> </span> <span class="menu-text">菜单 C（高亮）</span> </a> </li> <li class="menu-section"> <h4 class="menu-text">区段 B（二级菜单示例）</h4> <i class="menu-icon ki ki-bold-more-hor icon-md"></i> </li> <li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover"> <a href="javascript:;" class="menu-link menu-toggle"> <span class="svg-icon menu-icon"> <i class="fas fa-dice-one"></i> </span> <span class="menu-text">一级菜单（默认关闭）</span> <i class="menu-arrow"></i> </a> <div class="menu-submenu"> <i class="menu-arrow"></i> <ul class="menu-subnav"> <li class="menu-item menu-item-parent" aria-haspopup="true"> <span class="menu-link"> <span class="menu-text">一级菜单（默认关闭）</span> </span> </li> <li class="menu-item" aria-haspopup="true"> <a href="custom/apps/inbox.html" class="menu-link"> <i class="menu-bullet menu-bullet-line"><span></span></i> <span class="menu-text">二级菜单 a</span> </a> </li> <li class="menu-item" aria-haspopup="true"> <a href="custom/apps/inbox.html" class="menu-link"> <i class="menu-bullet menu-bullet-line"><span></span></i> <span class="menu-text">二级菜单 b（带徽章）</span> <span class="menu-label"> <span class="label label-danger label-inline">new</span> </span> </a> </li> </ul> </div> </li> <li class="menu-item menu-item-submenu menu-item-here menu-item-open" aria-haspopup="true" data-menu-toggle="hover"> <a href="javascript:;" class="menu-link menu-toggle"> <span class="svg-icon menu-icon"> <i class="fas fa-dice-two"></i> </span> <span class="menu-text">一级菜单（高亮/默认打开）</span> <i class="menu-arrow"></i> </a> <div class="menu-submenu"> <i class="menu-arrow"></i> <ul class="menu-subnav"> <li class="menu-item menu-item-parent" aria-haspopup="true"> <span class="menu-link"> <span class="menu-text">一级菜单（高亮/默认打开）</span> </span> </li> <li class="menu-item menu-item-active" aria-haspopup="true"> <a href="custom/apps/inbox.html" class="menu-link"> <i class="menu-bullet menu-bullet-line"><span></span></i> <span class="menu-text">二级菜单 c（高亮）</span> </a> </li> <li class="menu-item" aria-haspopup="true"> <a href="custom/apps/inbox.html" class="menu-link"> <i class="menu-bullet menu-bullet-line"><span></span></i> <span class="menu-text">二级菜单 d（带徽章）</span> <span class="menu-label"> <span class="label label-danger label-inline">new</span> </span> </a> </li> </ul> </div> </li> <li class="menu-section"> <h4 class="menu-text">区段 C（三级菜单示例）</h4> <i class="menu-icon ki ki-bold-more-hor icon-md"></i> </li> <li class="menu-item menu-item-submenu menu-item-open menu-item-here" aria-haspopup="true" data-menu-toggle="hover"> <a href="javascript:;" class="menu-link menu-toggle"> <span class="svg-icon menu-icon"> <i class="fas fa-dice-one"></i> </span> <span class="menu-text">一级菜单</span> <i class="menu-arrow"></i> </a> <div class="menu-submenu"> <i class="menu-arrow"></i> <ul class="menu-subnav"> <li class="menu-item menu-item-parent" aria-haspopup="true"> <span class="menu-link"> <span class="menu-text">一级菜单</span> </span> </li> <li class="menu-item menu-item-submenu menu-item-open menu-item-here" aria-haspopup="true" data-menu-toggle="hover"> <a href="javascript:;" class="menu-link menu-toggle"> <i class="menu-bullet menu-bullet-line"><span></span></i> <span class="menu-text">二级菜单（默认打开）</span> <span class="menu-label"> <span class="label label-rounded label-primary">6</span> </span> <i class="menu-arrow"></i> </a> <div class="menu-submenu"> <i class="menu-arrow"></i> <ul class="menu-subnav"> <li class="menu-item" aria-haspopup="true"> <a href="custom/apps/user/list-default.html" class="menu-link"> <i class="menu-bullet menu-bullet-dot"><span></span></i> <span class="menu-text">三级菜单 1</span> </a> </li> <li class="menu-item menu-item-active" aria-haspopup="true"> <a href="custom/apps/user/list-datatable.html" class="menu-link"> <i class="menu-bullet menu-bullet-dot"><span></span></i> <span class="menu-text">三级菜单 2（高亮）</span> </a> </li> </ul> </div> </li> <li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover"> <a href="javascript:;" class="menu-link menu-toggle"> <i class="menu-bullet menu-bullet-line"><span></span></i> <span class="menu-text">二级菜单（默认关闭）</span> <i class="menu-arrow"></i> </a> <div class="menu-submenu"> <i class="menu-arrow"></i> <ul class="menu-subnav"> <li class="menu-item menu-item-submenu" aria-haspopup="true" data-menu-toggle="hover"> <a href="javascript:;" class="menu-link menu-toggle"> <i class="menu-bullet menu-bullet-dot"><span></span></i> <span class="menu-text">二级菜单（默认关闭）</span> <i class="menu-arrow"></i> </a> <div class="menu-submenu"> <i class="menu-arrow"></i> <ul class="menu-subnav"> <li class="menu-item" aria-haspopup="true"> <a href="custom/apps/profile/profile-1/overview.html" class="menu-link"> <i class="menu-bullet menu-bullet-line"><span></span></i> <span class="menu-text">三级菜单 3</span> </a> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> </ul>
效果：
关于手风琴功能：Metronic 菜单已实现手风琴功能，即当展开一个闭合的菜单时，非当前页面所在菜单项的房系菜单会自动闭合。