Bootstrap dropdown-submenu 二级菜单没有效果 解决!!!

闻枫
2023-12-01

今天优化了一些页面 需要用到下拉菜单 框架用的是Bootstrap 所以用到了dropdown-submenu 这个插件

一开始不太会用坑多的一比 网上很少齐全的解决方法 我这里总结一下

第一个问题就是二级菜单点击后没有显示出来(这个最坑):解决方案需要修改css
添加以下css即可:

.dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }

原因大概了解了一下:是应为bootstrap版本问题

这个dropdown-submenu已在启动3 RC中删除。用作家马克·奥托的话来说。

“子菜单现在网络上没有太多的位置,尤其是移动网络。它们将在3.0中被删除。”https://github.com/twbs/bootstrap/pull/6342

如果有错误欢迎指正   如果还有其他更好的方法解决也可以分享出来哦!!!!!!!!毕竟我一个后端业余前端 哈哈哈

 

 

 类似资料: