先上效果圖：

---

使用方法：
一、HTML：
只需要一個(gè)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',  // 請(qǐng)求后臺(tái)數(shù)據(jù)的接口
                type: 'post',
                shrink: false, 
                onSelect: function(v) {
                    console.log(v);
                }
            });
        });

---

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

參數(shù)詳細(xì)說明：

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

---

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

layui.hxNav('select', id );

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

---

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

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

<?php

$pid = empty($_POST['id'] ) ? null : $_POST['id']; // 前端發(fā)來的請(qǐng)求，表明了現(xiàn)在要請(qǐng)求哪一個(gè)節(jié)點(diǎn)的孩子，請(qǐng)求根節(jié)點(diǎn)時(shí)，這個(gè)參數(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,是一個(gè)自己寫的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ù)，用來獲取某個(gè)id是否具有孩子節(jié)點(diǎn)。
DELIMITER ;;
CREATE FUNCTION `isMenuHasChild`( inid INT ) RETURNS int(11)
    RETURN ( SELECT count(`id`) FROM `sy_menu` WHERE `pi`=inid );;
DELIMITER ;

---

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