Lauiui で 2 つのメニュー ページを使用する方法

Layui では次のように複数のメニュー ページを使用できます。複数の <ul> 要素を作成し、各要素がメニュー ページを表します。ネストされた <ul> 要素はメニュー ページを結合し、ネストされた要素はサブメニュー ページになります。 Layui の初期化時に使用する Menu 要素を指定します。サブメニュー ページに一意の識別子があることを確認し、

要素をネストするために <dl> 要素を使用してください。

#Layui 2 つのメニュー ページの使用方法

複数のメニュー ページを使用する Layui では、複数の

<ul>

要素を作成することで、複数のメニュー ページを使用できます。各 <ul> 要素はメニュー ページを表します。

複数のメニュー ページを結合する

複数のメニュー ページを結合するには、

<ul>

要素を別の &lt にネストする必要があります。 ;ul> 要素。ネストされた <ul> 要素は、子メニュー ページになります。

コード例

<ul class="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>

初期化

Layui を初期化するときは、使用する Menu 要素を指定する必要があります。

layui.use('element', function() {
  var element = layui.element;
  element.init();
});

使用上の注意

ネストされた <ul><ul>

要素に layui-nav-child があることを確認してください。親切。 サブメニュー ページの

要素は、<dl> 要素内にネストする必要があります。 各サブメニュー ページには一意の識別子 (

id

または data-id 属性など) が必要です。

以上がLauiui で 2 つのメニュー ページを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。