在 layui 中可以使用多個(gè) menu 頁面,方法如下:創(chuàng)建多個(gè)
元素,每個(gè)元素代表一個(gè) menu 頁面。嵌套 元素來合并 menu 頁面,嵌套的元素成為子 menu 頁面。初始化 layui 時(shí)指定要使用的 menu 元素。確保子 menu 頁面有唯一標(biāo)識(shí)符,并且使用
元素嵌套 元素。
Layui 如何使用兩個(gè) Menu 頁面
使用多個(gè) Menu 頁面
在 Layui 中,可以通過創(chuàng)建多個(gè)<ul></ul>
元素來使用多個(gè) Menu 頁面。每個(gè)<ul></ul>
元素都代表一個(gè) Menu 頁面。
合并多個(gè) Menu 頁面
要合并多個(gè) Menu 頁面,需要將<ul></ul>
元素嵌套在另一個(gè)<ul></ul>
元素中。嵌套的<ul></ul>
元素將成為子 Menu 頁面。
實(shí)例代碼
<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>
登錄后復(fù)制
初始化
在初始化 Layui 時(shí),需要指定將要使用的 Menu 元素。
<code class="javascript">layui.use('element', function() { var element = layui.element; element.init(); });</code>
登錄后復(fù)制
使用注意事項(xiàng)
確保嵌套的<ul></ul>
元素具有layui-nav-child
類。
子 Menu 頁面的<dd></dd>
元素必須嵌套在<dl></dl>
元素中。
每個(gè)子 Menu 頁面必須有唯一標(biāo)識(shí)符(例如id
或data-id
屬性)。