技術標籤：layuijavascriptjavascriptjsweblayui

問題：

通過layui的導航欄可以完成如下的佈局：

<ul class="layui-nav layui-nav-tree" lay-filter="test">
    <li class="layui-nav-item">
        <a class="" href="javascript:;">A</a>
        <dl class=
 
"layui-nav-child">
            <dd><a href="../">1</a></dd>
            <dd><a href="../clean_table_manage">2</a></dd>
            <dd><a href="../index_table_manage">3</a></dd>
            <
 
dd><a href="../black_manage">4</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">B</a>
        <dl class="layui-nav-child">
            <dd><a href="
 
../etl">1</a></dd>
        </dl>
        <dl class="layui-nav-child">
            <dd><a href="../etl_compute_manage">2</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">C</a>
        <dl class="layui-nav-child">
            <dd><a href="../index_manage">1</a></dd>
        </dl>
        <dl class="layui-nav-child">
            <dd><a href="../index_compute_list_manage">2</a></dd>
        </dl>
        <dl class="layui-nav-child">
            <dd><a href="../index_compute_manage">3</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">D</a>
        <dl class="layui-nav-child">
            <dd><a href="../model_manage">1</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">E</a>
        <dl class="layui-nav-child">
            <dd><a href="../deploy">1</a></dd>
            <dd><a href="../service">2</a></dd>
        </dl>
    </li>
</ul>

但是存在一個問題，子選單是通過<a>標籤的href跳轉的，所以每次點選子選單的選項，由於會跳轉到新頁面，所以所有的選單欄都會恢復關閉狀態：

這樣很不符合使用者習慣。

解決

只需加入一段javascript：

    window.onload=function(){
        url = window.location.pathname;
        console.log(url);
        $("a[href='.." + url + "']").parent().addClass('layui-this');
        $("a[href='.." + url + "']").parent().parent().parent().addClass('layui-nav-itemed');
    }

通過獲取當前頁面的url，獲取layui對應子選單的標籤，自動新增layui-this和layui-nav-itemed的類就可以儲存當前點選選單的選中狀態了。