想用JS直接实现系统菜单的导航高亮功能,其实就是自动检测页面url找到对应的元素addClass;不过因为本人菜鸟,实在写不出,求大神指教。
HTML结构如下(注释中就是基本需求)
<ul class="sidebar-menu" id="sidebar-menu">
<!-- 这个无二级的直接给他的<li> addClass("active") 就可以 -->
<li class=""><a href="{:url('index/index')}"><span>首页(1级无2级)</span></a></li>
<li class="treeview">
<a href="#"><span>系统管理(1级含2级)</span></a>
<ul class="treeview-menu">
<!-- 这种二级菜单除了给自己的li addClass("active")之外,
还要给他的父元素也就是class=treeview_menu 加class=menu_open,
还没完,treeview_menu的父元素treeview 也要addclass=active。-->
<li><a href="admin/config/index"><i class="fa fa-circle-o"></i> 配置管理</a></li>
<li><a href="admin/user/index"><i class="fa fa-circle-o"></i> 用户管理</a></li>
</ul>
</li>
</ul>
如上代码中的注释,我写了一个,已经基本满足上面的要求,但是还有一个需求,就是某些页面的url不在菜单里,也要让某个菜单高亮。比如上面的用户管理=admin/user/index ,进入用户管理肯定没问题,但是我还有一个 添加用户admin/user/add,进入添加用户这个页面的时候也想让 用户管理 href=admin/user/index这个菜单高亮,就不知道怎么写了。
我的想法是,访问页面的时候如果url存在在菜单中就自动高亮,如果不存在,如刚才说的添加用户admin/user/add,定义一个函数 如 set_nav_active(url) ,然后在admin/user/add这个页面 传入他想要高亮的菜单url ,比如se_nav_active(admin/user/index),但是,想法是有了,不知道怎么写了,求大神指教,或者大神有没有更好的办法
这个问题很有意思,总结一下,你要解决的问题有两个
根据当前 URL 找到匹配的
href
属性找到对应第 1 找到的
href
属性的那个<a>
,对它以及它的几级父元素添加状态下面来一个一个的解决
找到匹配的 href
首先,得让
href
和当前地址处于同样的目录级别表示。比如 href 里是admin/....
,那当前页面地址window.location.pathname
也要处理成这样,比如当前地址可能是/admin/...
,要去掉第一个/
;或者当前地址是/appname/admin/....
,要去掉前面的/appname/
。的过来,处理每个href
去适配当前地址的表示也是一样的(其实这样更合理,只是处理起来更麻烦)这会得到包含所有链接的
href
属性的一个数组(jQuery 对象),我们可以遍历这个数组来寻找匹配的 URL,不过找到 URL 之后再去找对应的<a>
是件麻烦事,所以,其实应该生成一个 map(JS 对象)现在会得到一个
urlsMap
,它是键是 URL,就是根据href
处理而来的 URL。值是一个被 jQuery 封装的<a>
的 DOM 对象,一一对应的关系。第一轮,精确匹配
如果
foundUrl
是一个字符串,说明找到了,不然就是没找到(因为 filter 的结果是个空数组,所以它的第 0 个元素是 undefined)。如果没找到,再进行第二轮,这时候需要截掉pathname
的最后一部分,这也是pathname
和foundUrl
用let
申明而不用const
申明的原因第二轮,startsWith 匹配
如果这样还没找到,你还需要再往前找,你可以考虑用一个循环代替上面的
if
分支,注意循环的结束条件,不要搞成死循环了。最终也没找到,那就拉倒吧。如果找到了,那么
foundUrl
对应的那个<a>
就是要高亮的。这个<a>
很好找,因为我们建了映射表下面进行第二步
改变相关元素的状态
这时候就需要找三个东西,
<a>
外层的<li>
,再外层的.treeview-menu
和再外层的.treeview
。如果都是直接父级关系,那很好找,依次取.parent()
就好。如果不是,那就用.closest()
,下面的代码假设是这种情况都找到了,改个类就容易了(因为 jQuery 的容错性,完全不需要去判断找没找到,直接改就是了)
搞定是搞定了,但是上面的代码都是直接写的,没测试,所以自己小心着用。
document.querySelectorAll('xxxx')[{%$index%}].className ='active'
首先所有页面调用这个函数 treeMenuActive() 不传参;
访问个别页面且这个页面的URL地址不在菜单里时再次调用 treeMenuActive('admin/user/index') 并传参(想要高亮的菜单URL)
PS:暂时测试没发现什么问题,不过 treeMenuActive() 在某些页面调用两次,先一次不传参,再一次传参,不知道这种情况会不会产生不可预料的问题,写成两个方法又好多代码重复,所以大神们有什么好想法呢。