在 layui 中可以使用多個 menu 頁面,方法如下:創建多個
元素,每個元素代表一個 menu 頁面。嵌套 元素來合并 menu 頁面,嵌套的元素成為子 menu 頁面。初始化 layui 時指定要使用的 menu 元素。確保子 menu 頁面有唯一標識符,并且使用
元素嵌套 元素。
Layui 如何使用兩個 Menu 頁面
使用多個 Menu 頁面
在 Layui 中,可以通過創建多個<ul></ul>
元素來使用多個 Menu 頁面。每個<ul></ul>
元素都代表一個 Menu 頁面。
合并多個 Menu 頁面
要合并多個 Menu 頁面,需要將<ul></ul>
元素嵌套在另一個<ul></ul>
元素中。嵌套的<ul></ul>
元素將成為子 Menu 頁面。
實例代碼
<code class="html"><ul class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">layui-nav"> <li class="layui-nav-item"> <a href="javascript:;">菜單 1</a> <dl class="layui-nav-child layui-anim layui-anim-upbit"> <dd><a href="javascript:;">子菜單 1-1</a></dd> <dd><a href="javascript:;">子菜單 1-2</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">菜單 2</a> <dl class="layui-nav-child layui-anim layui-anim-upbit"> <dd><a href="javascript:;">子菜單 2-1</a></dd> <dd><a href="javascript:;">子菜單 2-2</a></dd> </dl> </li> </ul></code>
登錄后復制
初始化
在初始化 Layui 時,需要指定將要使用的 Menu 元素。
<code class="javascript">layui.use('element', function() { var element = layui.element; element.init(); });</code>
登錄后復制
使用注意事項
確保嵌套的<ul></ul>
元素具有layui-nav-child
類。
子 Menu 頁面的<dd></dd>
元素必須嵌套在<dl></dl>
元素中。
每個子 Menu 頁面必須有唯一標識符(例如id
或data-id
屬性)。