Lauiuiフレームワークでサイドナビゲーションバーのクリックイベントを無効にする方法

私たちは仕事でフレームワークをよく使用します。完全に機能し、使いやすいフレームワークは、確か​​に作業効率を向上させます。 layui は優れたフロントエンドのモジュラー CSS フレームワークであり、jquery に基づいており、簡単に始めることができます。この記事では、サイド ナビゲーション バーのクリック イベントを無効にする layui を主に紹介します。必要な友達は参考にしてください。

layui は、優れたフロントエンドのモジュラー CSS フレームワークです。私は、layui を使用して 2 つの完全なプロジェクトを実行しました。その感想としては、layui はバックエンド管理インターフェイスに非常に適しており、jquery に基づいているため、簡単に始めることができます。もちろん、彼女の最大の利点は、requirejs や seajs などの煩雑な構成と比較して、よりシンプルで粗雑なアプローチであると思います。このようなフロントエンド フレームワークを探している場合は、彼女をお勧めします。

くだらない話をたくさんした後、重要なポイントについて話しましょう。

上の図に対応する HTML コードは次のとおりです

<ul class="layui-nav layui-nav-tree" lay-filter="nav">
       <li class="layui-nav-item layui-nav-itemed">
           <a class="" href="javascript:;">销售管理</a>
           <dl class="layui-nav-child">
               <dd>
                   <a href="xiaoshoudingdan.asp">销售订单</a>
               </dd>
              <dd>
                   <a href="jianyidingdan.asp">建议订单</a>
               </dd>
               <dd>
                   <a href="xiaoshoutuidan.asp">销售退单</a>
               </dd>
           </dl>
       </li>
       <li class="layui-nav-item layui-nav-itemed">
           <a href="javascript:;">采购管理</a>
           <dl class="layui-nav-child">
               <dd>
                   <a href="caigoudingdan.asp">采购订单</a>
               </dd>
               <dd>
                   <a href="caigoutuidan.asp">采购退单</a>
               </dd>
           </dl>
       </li>
　　　.....此处省略N行代码

まずこのコードを簡単に分析してみましょう:

layui-navナビゲーション コンテナー、layui-nav-tree はツリー ナビゲーションを表します。トップ ナビゲーションの場合は、このクラスを追加する必要があります。lay-filter="nav" の場合は必要ありません。公式 Web サイトの説明は「イベント フィルター。さまざまな場所で見かけることがあります。一般的に、特定のカスタム イベントをリッスンするために使用されます。ID セレクターと考えることができます。」

各 li の下の最初の a。は第 1 レベルのナビゲーションであり、dl パッケージは第 2 レベルのナビゲーションです。デフォルトでは、layui の組み込みモジュール element.js がページに導入されている限り、第 1 レベルのナビゲーションをクリックすると、第 2 レベルのメニューが折りたたまれるか展開されます。しかし、私のプロジェクトではこの機能は必要ないので、無効にする必要があります。しかし、ドキュメントを読んだ後、layui にはこのイベントを無効にする属性が提供されていないことがわかりました。ソースコードを見るしかありません。幸いなことに、layui のソースコードの構造は非常に明確で、コメントも非常に詳細に書かれているので、すぐに見つけることができます。

element.js の 377 行目にリターンを追加して、コードがそれ以上実行されないようにすることで、問題は解決します。

折り畳みボタンも消えます

概要

概要: サイド ナビゲーション バーを無効にするlayuiのクリック イベントを処理する上記の方法を紹介します。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

以上がLauiuiフレームワークでサイドナビゲーションバーのクリックイベントを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。