页面如何回显左侧导航菜单？

（1）如下图，做管理网站的时候一般左侧都有二级菜单，甚至多级菜单，我们如何通过JS代码控制显示对应的菜单栏呢？

（2）菜单栏对应的代码如下：

<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                    <li class="layui-nav-item"><a href="/home/place">地图</a></li>
                    <li class="layui-nav-item"><a href="/home/sect">门派</a></li>
                    <li class="layui-nav-item"><a href="/home/role">角色</a></li>
                    <li class="layui-nav-item"><a href="/home/arms">武器</a></li>
                    <li class="layui-nav-item"><a href="/home/pet">灵伴</a></li>
                    <li class="layui-nav-item"><a href="/home/skill">灵术</a></li>
                    <li class="layui-nav-item"><a href="/home/step">境界</a></li>
                    <li class="layui-nav-item"><a href="/home/pill">丹药</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

（3）解决思路：获取当前窗口相对路径 --> 找到对应的菜单栏 --> 给对应菜单栏加上选中效果--> 去掉兄弟菜单栏的选中效果。

照着这个思路，于是可以在公共部分的JS中编写出如下代码。

    /* 左侧菜单栏回显 */
    // 获取浏览器显示的url：如 http://localhost/home/place
    var url = window.location.href;
    // 获取域名：这里为localhost
    var domain = document.domain;
    // 按域名拆分url 可以得到两部分，其中后面这部分即为我们需要的相对url，如：/home/place
    var paths = url.split(domain);
    var path = "";
    if (paths.length > 0) {
        path = paths[1];
    }
    // 获取该相对url所在的元素
    var li = $("a[href='"+path+"']").parent();
    // 当前元素添加选中效果
    $(li).addClass("layui-nav-itemed");
    // 其他所有兄弟元素去掉选中效果
    $(li).siblings().removeClass("layui-nav-itemed");

（4）如此即可完成点击对应的菜单栏，进行相应的回显，你看我们现在已经从刚刚一地个菜单跳到第二个菜单了。

温馨提示：如果你的链接携带有参数，记得参数处理，确保获取到相对路径和代码上相对路径保持一致！