antDesign menu 自定义修改选中样式,一级和多级菜单
生活随笔
收集整理的這篇文章主要介紹了
antDesign menu 自定义修改选中样式,一级和多级菜单
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
antDesign menu 自定義修改選中樣式,一級(jí)和多級(jí)菜單
項(xiàng)目里一級(jí)菜單和二級(jí)菜單都存在的情況下,需要對(duì)選中的父級(jí)菜單做高亮選中狀態(tài)
問題描述
二級(jí)和一級(jí)菜單互不影響選中(我這都選中了)
.ant-menu-submenu-selected > .ant-menu-submenu-title {position: relative; } .ant-menu-submenu-selected > .ant-menu-submenu-title:before {width: 4px;height: 20px;position: absolute;content: "";left: 0;background: pink; }解決方案:
當(dāng)有子菜單時(shí),不希望子菜單選中,通過觀察,將兄弟級(jí)下的選中子菜單排除掉
.ant-menu-item-selected {position: relative; } .ant-menu-item-selected:before {width: 4px;height: 20px;position: absolute;content: "";left: 0;background: pink; }.ant-menu-submenu-selected > .ant-menu-submenu-title {position: relative; } .ant-menu-submenu-selected > .ant-menu-submenu-title:before {width: 4px;height: 20px;position: absolute;content: "";left: 0;background: pink; } .ant-menu-submenu-selected.ant-menu-submenu-title+ ul.ant-menu-item-selected:before {display: none; }這樣就可以了!!
總結(jié)
以上是生活随笔為你收集整理的antDesign menu 自定义修改选中样式,一级和多级菜单的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 解决pandas处理json为csv格式
- 下一篇: PostgreSQL巧用ctid等价改写