Bootstrap的下拉菜单默认必须点击才可以,不是很方便,通过本教程实现鼠标悬停下拉
添加JS,并且判断电脑端才这样,否则会影响移动端的下拉效果。
//定义变量获取屏幕视口宽度 var windowWidth = $(window).width(); if(windowWidth >= 1024){ //下拉菜单鼠标悬停 $(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); }); $(".dropdown").mouseleave(function(){ $(this).removeClass("open"); }) }) //解决导航一级A链接无法点击 $(document).ready(function(){ $(document).off('click.bs.dropdown.data-api'); }); }
CSS
@media (min-width:768px) { .dyui-nav>li>.dropdown-menu {opacity: 1; display: none; margin: 0} .dyui-nav li.open .dropdown-menu {display: block;} }