欢迎光临一流素材网,免积分免费素材下载!

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

所属栏目:响应式教程更新时间:2021-05-26 来源:网络 原作者:不详 发布:deepdfhy浏览:0

免费开源可商用的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;}

}


标签:
收藏 0 有帮助 0 没帮助 0 打赏
相关教程
给个评价吧