导航栏切换下拉菜单上的悬停效果不影响动态数据

时间:2018-09-24 10:33:09

标签: html css ajax drop-down-menu

我为导航栏下拉菜单创建了一个动态数据,但是遇到的问题是,当它处于静态模式时,下拉悬停仍然有效。

但是,当我从数据库加载数据并将其显示在页面上时,悬停效果不起作用。

这是我的剧本:

               $.ajax({
                    url:'/api/navbarToggleDropdownMenu/getall',
                    type:'GET',
                    dataType:'JSON',
                    // async:false,
                    success:function (res) {

                        for(i in res){
                            myKey = i;
                            myVal = res[i]
                            for(o in myVal){
                               nKey = o 
                               nVal = myVal[o]

                                if(nVal.moduleId != undefined || nVal.moduleId != null){

                                    $('[data-id="'+myKey+'"]').replaceWith('<li class="dropdown megamenu-fw" >'+
                                                                                    '<a href="javascript:void(0)" class="dropdown-toggle">'+nVal.moduleName+'</a>'+
                                                                                    '<ul class="dropdown-menu megamenu-content" style="height:100%;" role="menu">'+
                                                                                        '<li>'+
                                                                                            '<div class="row">'+
                                                                                                '<div class="col-menu col-md-3">'+
                                                                                                    '<ul class="menu-col">'+
                                                                                                        '<li><a href="about">'+nVal.moduleName+'</a></li>'+
                                                                                                        '<li><a href="mvco">'+nVal.moduleName+'</a></li>'+
                                                                                                    '</ul>'+
                                                                                                '</div><!-- end col-3 -->'+

                                                                                            '</div><!-- end row -->'+
                                                                                        '</li>'+
                                                                                    '</ul>'+
                                                                                '</li>');
                                }
                            }
                        }

                    }
                })

但是当我在AJAX请求后调整浏览器大小时,悬停效果有效。

我想做的是在AJAX请求加载后使悬停效果起作用。

0 个答案:

没有答案