Bootstrap下拉菜单修改为鼠标悬停下拉

免费开源可商用的PHP万能建站程序-DiYunCMS(帝云CMS)

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;}

}