今天優化了一些頁面 需要用到下拉菜單 框架用的是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
如果有錯誤歡迎指正 如果還有其他更好的方法解決也可以分享出來哦!!!!!!!!畢竟我一個後端業餘前端 哈哈哈