最新消息:什么都不会,还什么都不想学,什么都不想干,我八成是废了!

YII2菜单栏选中后高亮显示

网站开发 TrojanSun 124浏览 0评论
文章目录
[隐藏]

说明

也不知道这么说对不对,反正意思就是,当我选择了这个菜单之后,我这个页面打开之后应该是这个菜单被选中的状态,如果是子菜单,那么父级菜单也应该被选中。

其实yii2的nav之类的菜单是支持这个的,我们不用自己写。

但是毕竟封装的东西不一定是我要的,如果要去修改nav的template是非常的麻烦的,会导致页面的文件看着非常的乱,最起码我这里看到的是这样的,而且我也不喜欢那样去写,不如直接一个js搞定。

实际开发

首先我们要再左侧的菜单给写上固定的id,id是什么的?一般我们去访问一个页面的时候,这个页面比较固定的两个值是controller和action,所以我们只要用这两个去拼接一下就可以。

代码演示

这样的做法就是,我们给父级菜单active的class类(如果action的id不存在,那么我们就直接高亮选择父级菜单),然后我们要给子类的UL一个in,否则会报错。

ps:这个in是我根据我自己的主题来的,大家可以选择性复制、粘贴。

效果演示

第一张图是当action的id存在的时候

第二张图是当action的id不存在的时候

本示例使用的主题为:inspinia国外的主题

购买地址:https://dwz.ms/inspinia

转载请注明:TrojanSun » YII2菜单栏选中后高亮显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址