先上效果圖：

---

使用方法：
一、HTML：
只需要一個div

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

二、JS

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

---

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

參數(shù)詳細說明：

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

---

另外，如果由于某些原因，需要用js選中某個節(jié)點時，比如，用戶點擊了之前打開過的tab標(biāo)簽，這時需要在導(dǎo)航欄中回顯一下，可以使用下面的方法：

layui.hxNav('select', id );

注意：通過這個方法選擇節(jié)點時，仍然會觸發(fā)組件的onSelect事件！

---

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

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

<?php

$pid = empty($_POST['id'] ) ? null : $_POST['id']; // 前端發(fā)來的請求，表明了現(xiàn)在要請求哪一個節(jié)點的孩子，請求根節(jié)點時，這個參數(shù)為空
$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語句中的isMenuHasChild,是一個自己寫的mysql函數(shù)，原理如下：

-- menu表結(jié)構(gòu)：
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';

-- 自定義的小函數(shù)，用來獲取某個id是否具有孩子節(jié)點。
DELIMITER ;;
CREATE FUNCTION `isMenuHasChild`( inid INT ) RETURNS int(11)
    RETURN ( SELECT count(`id`) FROM `sy_menu` WHERE `pi`=inid );;
DELIMITER ;

---

最后。這個組件很容易被擴展。。。