先上效果圖：

---

使用方法：
一、HTML：
只需要一個(gè)div

<div id="hxNavbar"></div>

二、JS

       layui.extend({
            hxNav: '../jslibs/layui/extend/hxNav'  // 根據你自己的目錄設置
        }).use(['element','hxNav'],function(){
            layui.hxNav({
                element: '#hxNavbar',        // 必須，指定ID
                url: 'system/getMenuNavbar.php',  // 請求后臺數據的接口
                type: 'post',
                shrink: false, 
                onSelect: function(v) {
                    console.log(v);
                }
            });
        });

---

說(shuō)明：
頁(yè)面加載后，組件會(huì )自動(dòng)向url指定的接口發(fā)送請求，第一次請求時(shí)不帶任何參數，此時(shí)服務(wù)器應返回所有的根節點(diǎn)。此時(shí)組件全部的根節點(diǎn)都是收縮狀態(tài)。
如果用戶(hù)點(diǎn)擊了某個(gè)節點(diǎn)，組件會(huì )自動(dòng)再次向接口請求數據，此時(shí)會(huì )攜帶一個(gè)參數，參數名稱(chēng)為ID，內容值為被點(diǎn)擊的節點(diǎn)的ID。此時(shí)，服務(wù)器應返回該節點(diǎn)的所有孩子節點(diǎn)，組件收到孩子節點(diǎn)數據后，會(huì )自動(dòng)渲染到被點(diǎn)擊的節點(diǎn)下。

參數詳細說(shuō)明：

element: 字符串，必須參數，元素ID，默認空
url: 字符串，必須參數，數據接口，默認空("")
type: 字符串，請求類(lèi)型，可以為post、get兩種，默認post
width: 數值，寬度，默認220(px)，不需要帶“px”
shrink: 布爾，指定是否自動(dòng)收縮未選定的節點(diǎn)。默認false
background: 字符串，背景顏色，默認“#393d49”
autoExpand: 布爾，默認false。默認情況下，只有用戶(hù)點(diǎn)擊了節點(diǎn)的時(shí)候，才去請求并加載該節點(diǎn)的數據，如果該項設置為ture，則組件會(huì )立即向服務(wù)器請求所有的節點(diǎn)數據。
onSelect: function(node) 函數，當用戶(hù)選擇了某個(gè)節點(diǎn)時(shí)，觸發(fā)該事件。node中包含了所選節點(diǎn)的數據。

---

另外，如果由于某些原因，需要用js選中某個(gè)節點(diǎn)時(shí)，比如，用戶(hù)點(diǎn)擊了之前打開(kāi)過(guò)的tab標簽，這時(shí)需要在導航欄中回顯一下，可以使用下面的方法：

layui.hxNav('select', id );

注意：通過(guò)這個(gè)方法選擇節點(diǎn)時(shí)，仍然會(huì )觸發(fā)組件的onSelect事件！

---

關(guān)于數據接口：
JSON格式。形如：[{ "id": "ident", "text": "title text", "icon": "icon", "hasChildren": 0，"href": "targetUrl.php", }]
解釋?zhuān)?br>id：節點(diǎn)的唯一標識（必須）
text：節點(diǎn)的文本 （必須）
hasChildren：數值型，指明這個(gè)節點(diǎn)是否擁有孩子節點(diǎn)，只需要給0或1即可。
組件必須的數據就是上述3個(gè)。另外還有一個(gè)icon，是可選的，如下：
icon：節點(diǎn)的圖標，必須是layui-icon-xxx的類(lèi)名。（如果沒(méi)有圖標，可以不設置該字段，或者返回空）
至于href等其他數據，根據自己的需要來(lái)設置。

關(guān)于后臺的例子：

<?php

$pid = empty($_POST['id'] ) ? null : $_POST['id']; // 前端發(fā)來(lái)的請求，表明了現在要請求哪一個(gè)節點(diǎn)的孩子，請求根節點(diǎn)時(shí)，這個(gè)參數為空
$pdo = new MyPDO();  // pdo連接到mysql
$arrParams = array();
if( empty( $pid ))
        $whereParent = 'pi IS NULL';
else {
        $whereParent = 'pi=:pi';
        $arrParams[':pi'] = $pid;
}
$stm = $pdo->prepare("SELECT id,nm AS text,ic AS icon,isMenuHasChild(id) AS hasChildren,hr AS href FROM sy_menu WHERE {$whereParent} ORDER BY st");
$stm->execute($arrParams);
$result = $stm->fetchAll(PDO::FETCH_ASSOC);
echo json_encode( $result, JSON_UNESCAPED_UNICODE );

上面例子中，關(guān)于sql語(yǔ)句中的isMenuHasChild,是一個(gè)自己寫(xiě)的mysql函數，原理如下：

-- menu表結構：
DROP TABLE IF EXISTS `sy_menu`;
CREATE TABLE sy_menu(
    `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
    `pi` int(11) DEFAULT NULL COMMENT 'parent id',
    `st` int(11) NOT NULL DEFAULT 0 COMMENT 'sort',
    `nm` varchar(128) DEFAULT NULL COMMENT 'name',
    `ic` varchar(64) DEFAULT NULL COMMENT 'icon',
    `hr` varchar(256) DEFAULT NULL COMMENT 'href',
    PRIMARY KEY (`id`),
    KEY(`hr`),
    CONSTRAINT `menu_self_p` FOREIGN KEY (`pi`) REFERENCES sy_menu(`id`) ON UPDATE CASCADE ON DELETE CASCADE
)ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT 'menus';

-- 自定義的小函數，用來(lái)獲取某個(gè)id是否具有孩子節點(diǎn)。
DELIMITER ;;
CREATE FUNCTION `isMenuHasChild`( inid INT ) RETURNS int(11)
    RETURN ( SELECT count(`id`) FROM `sy_menu` WHERE `pi`=inid );;
DELIMITER ;

---

最后。這個(gè)組件很容易被擴展。。。