最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】确认是否是js没有正确运行导致手机端WordPress主题Enfold的主菜单显示异常

WordPress crifan 319浏览 0评论

折腾:

【已解决】WordPress的网站Enfold主题在手机端顶部菜单异常

期间,已经确定不是css的原因了,此处看起来像是js的问题,感觉js没有正确运行,没有给对应节点加上is-active的class值,所以菜单显示异常了。去搞清楚具体什么原因。

注意到

www.china-teatime.com/wp-content/uploads/dynamic_avia

中的除了之前的css,还有header和footer的js:

比如:

avia-head-scripts-4d9be2120ec5317514492459d4c40f82.js

那么去看看:

此处真正用到的是哪个js

现有js中却的是哪部分内容-》这样拷贝过来,或许就可以了?

先去看看 现有正常的有哪些js文件:

不过需要先去搜索,哪些js中有我们希望的:

给.av-hamburger–spin 加上 is-active的

竟然没有找到js

还是对比js文件少了哪些吧

好像很多不同

不过先去看看此处生效的js:

https://www.china-teatime.com/wp-content/uploads/dynamic_avia/avia-footer-scripts-d7553e22a948549dd1ff3d4a53c976f8.js

但是是footer,此处顶部菜单,感觉像是header,再去找找是否有header的js

结果搜不到:

avia-head-scripts

代码中有:

正常的中:

/Users/crifan/dev/dev_root/crifan.com/mamp/wp_farmedia/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/asset-manager.class.php

    //default calling of the merging/compression script. the "merge" function can in theory also be called from outside
    public function try_minifying_scripts()
    {
      // check if we got a compressed version that includes all the elements that we need.
      // generate a new version if the theme version changes or the css files that are included change
      // compare by hash if a new version is required
      
      
      //compresses css files and stores them in a file called avia-merged-styles-HASH_ID.css
      $this->merge('css', 'avia-merged-styles');
      
      //compresses JS files and stores them in a file called avia-head-scripts-HASH_ID.js/avia-footer-scripts-HASH_ID.js// - footer scripts attr: (group 1)
      
      //$this->merge('js', 'avia-head-scripts', array('groups'=>0));
      $this->merge('js', 'avia-footer-scripts', array('groups'=>1));
    }

/Users/crifan/dev/dev_root/crifan.com/mamp/china_teatime/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/asset-manager.class.php

    //default calling of the merging/compression script. the "merge" function can in theory also be called from outside
    public function try_minifying_scripts()
    {
      // check if we got a compressed version that includes all the elements that we need.
      // generate a new version if the theme version changes or the css files that are included change
      // compare by hash if a new version is required
      
      
      //compresses css files and stores them in a file called avia-merged-styles-HASH_ID.css
      $this->merge('css', 'avia-merged-styles');
      
      //compresses JS files and stores them in a file called avia-head-scripts-HASH_ID.js/avia-footer-scripts-HASH_ID.js// - footer scripts attr: (group 1)
      $this->merge('js', 'avia-head-scripts', array('groups'=>0));
    }

感觉是正常wp_farmedia页面也没用到avia-head-scripts

而此处china_teatime中好像合并出了avia-head-scripts,不过也没有用到的感觉

所以都没有用到avia-head-scripts,那就不管了。

去对比avia-footer-scripts

结果差异太大,看不出具体区别

最新页面的js倒是能搜到:av-hamburger

也能搜到:menu-main

后来无意间发现:

此处给:

<span class="av-hamburger av-hamburger--spin av-js-hamburger av-inserted-main-menu  is-active">
                            <span class="av-hamburger-box">
                                  <span class="av-hamburger-inner"></span>
                                  <strong>Menu</strong>
                            </span>
                            </span>

加上:

is-active后

显示就对了:

-》

说明:此处css配置都没问题,就是js中缺少了对应的逻辑

而此处点击菜单,有改动的地方,除了is-active还有一个opacity:

所以,就去找正常网页中,哪里的js去控制了此处的:

#avia-menu > li > a > span

对应的:

av-hamburger av-hamburger--spin av-js-hamburger av-inserted-main-menu

加上的:

is-active

但是搜到的内容,都不太像,唯一一个接近的是:

搜:

av-js-hamburger

wp-content/themes/enfold-child/js/avia.js

看来这部分js代码就是我们要的:

        //toogle hide/show for submenu items
        $('.html_av-submenu-display-hover').on( 'mouseenter touchstart', '.av-width-submenu', function (e) 
        { 
            $(this).children("ul.sub-menu").slideDown('fast');    
        });
        
        $('.html_av-submenu-display-hover').on( 'mouseleave touchstart', '.av-width-submenu', function (e) 
        { 
            $(this).children("ul.sub-menu").slideUp('fast');    
        });
        
        //toogle hide/show for submenu items
        $('.html_av-submenu-display-click').on( 'click', '.av-width-submenu > a', function (e) 
        { 
            e.preventDefault();
            e.stopImmediatePropagation();
            
            var clicked = $(this), parent  = clicked.parents('li').eq(0);
                    
            parent.toggleClass('av-show-submenu');
            
            if(parent.is('.av-show-submenu'))
            {
                parent.children("ul.sub-menu").slideDown('fast');    
            }
            else
            {
                parent.children("ul.sub-menu").slideUp('fast');    
            }
            
        });
        
        
        (function normalize_layout()
        {
            //if we got the menu outside of the main menu container we need to add it to the container as well
            if(menu_in_logo_container.length) return;
        
            var menu2 = $('#header .main_menu').clone();
                menu2.find('.menu-item:not(.menu-item-avia-special)').remove();
                menu2.insertAfter(logo_container.find('.logo'));
                
            //check if we got social icons and append it to the secondary menu    
            var social = $('#header .social_bookmarks').clone();
            if(!social.length) social = $('.av-logo-container .social_bookmarks').clone();
            
            if( social.length )
            {
                menu2.find('.avia-menu').addClass('av_menu_icon_beside');
                menu2.append(social);
            }
            
            //re select the burger menu if we added a new one
            burger_wrap = $('.av-burger-menu-main a');
        }());
        
        burger_wrap.click(function(e)
        {    
            if(animating) return;
            burger         = $(this).find('.av-hamburger'),
            animating     = true;
            
            if(!menu_generated)
            {
                menu_generated = true;
                burger.addClass("av-inserted-main-menu");

                burger_ul = $('<ul>').attr({id:'av-burger-menu-ul', class:''})
                var first_level_items = menu.find('> li:not(.menu-item-avia-special)'); //select all first level items that are not special items
                var    list = create_list( first_level_items , burger_ul);
                
                burger_ul.find('.noMobile').remove(); //remove any menu items with the class noMobile so user can filter manually if he wants
                burger_ul.appendTo(inner_overlay);
                first_level = inner_overlay.find('#av-burger-menu-ul > li');
                
                if($.fn.avia_smoothscroll){
                    $('a[href*="#"]', overlay).avia_smoothscroll(overlay);
                }
            }
            
            if(burger.is(".is-active"))
            {
                burger.removeClass("is-active");
                htmlEL.removeClass("av-burger-overlay-active-delayed");

                overlay.animate({opacity:0}, function()
                {
                    overlay.css({display:'none'});
                    htmlEL.removeClass("av-burger-overlay-active");
                    animating = false;
                });
                
             }
            else
            {
                set_list_container_height();
                
                var offsetTop = header_main.length ? header_main.outerHeight() + header_main.position().top : header.outerHeight() + header.position().top;
                
                overlay.appendTo($(e.target).parents('.avia-menu'));
                
                burger_ul.css({padding:( offsetTop ) + "px 0px"});
                
                first_level.removeClass('av-active-burger-items');
                
                burger.addClass("is-active");
                htmlEL.addClass("av-burger-overlay-active");
                overlay.css({display:'block'}).animate({opacity:1}, function()
                { 
                    animating = false; 
                });
                
                setTimeout(function()
                {
                    htmlEL.addClass("av-burger-overlay-active-delayed");
                        
                }, 100);
                
                first_level.each(function(i)
                {
                    var _self = $(this);
                    setTimeout(function()
                    {
                        _self.addClass('av-active-burger-items');    
                    }, (i + 1) * 125)
                });
            }
            
            e.preventDefault();
        });
    }

就是点击后打开子菜单,去给is-active执行:

burger.addClass(“is-active”);

或:

burger.removeClass(“is-active”);

的地方。

那去搜现在网站中,是否有这部分代码:

结果是有的,且合并的后的js也有这部分代码:

但是为何没有生效呢,就怪了。

然后对比了目前的js和class的值,也都一样。

注意到:

点击此处菜单,也是更新了:

只是却了is-active

也有:

那再去找找:

av-burger-overlay

搜到太多了。算了。

还是继续研究:

av-inserted-main-menu

部分代码,为何此处没有完全生效。

对比一下,结果这部分没改动:

此处感觉是:

burger_wrap.click

的函数没有完全执行到

去研究看看为何

通过自己手动添加调试代码发现:

效果:

第一次,点击菜单,的确是进入了:

not active的代码段的

可以看到输出:

->

那就诡异了,代码都执行到了,但是没有生效

-》难道代码合并后,代码本身出问题了?变量无效了?

再去调试看看代码变量是否有问题

调试发现,源码中的:

wp-content/themes/enfold-child/js/avia.js

    burger_wrap.click(function(e)

burger_wrap是undefined

这就不对了。

感觉像是,猜测是:

此处的代码:

;s=t('.av-burger-menu-main a')}());s.click(function(a){

中的s,可能由于变量作用域的关系,被压缩后,变量名错了,被前面的s覆盖了。

即:此处的js代码的压缩,导致变量失效了

所以手动去改变量名试试

后来发现是自己搞错了,此处是有值的:

只不过在click函数时间内,s是空的

再去调试发现:

addClass是正常的,class的值是加上了is-active的:

after: burger class=av-hamburger av-hamburger--spin av-js-hamburger av-inserted-main-menu is-active

但是不知道为何html中却还是没有:

以及时jquery没生效呢

去查了下jquery,的确少了个:

<script type="text/javascript" src="https://farmedia.de/wp-content/themes/enfold/js/aviapopup/jquery.magnific-popup.min.js?ver=4.2.4"></script>

不过感觉应该不是重点

重点是:

js中已经加上了is-active了,但是为何html中还没显示

是后续代码又删除了is-active吗?

此处函数burger_wrap.click结束,都还是:

end of burger_wrap.click: burger class=av-hamburger av-hamburger--spin av-js-hamburger av-inserted-main-menu is-active

感觉像是:

jquery用addClass添加了 class,结果没有生效

jquery add class but not exist

jquery addclass not working

list – add class via jquery but only when not exists – Stack Overflow

jquery – Should I use “hasClass” before “addClass”? – Stack Overflow

jquery – Check if class already assigned before adding – Stack Overflow

html – jQuery.addClass not working – Stack Overflow

javascript – addclass not working jquery – Stack Overflow

javascript – jQuery addClass is not working now – Stack Overflow

css – JQuery addClass not working – Stack Overflow

jQuery addClass not working? – Stack Overflow

weird behavior – addClass not working in one of my functions? – jQuery Forum

测试代码去加上额外的class,结果是可以保留的:

那么说明:

估计是哪里把is-active去掉了

去找找是否有什么监听class值变化的机制

jquery addclass not show in html

jQuery addClass() does not appear to add the CSS class – Stack Overflow

感觉还是哪里把is-active去掉了

转载请注明:在路上 » 【已解决】确认是否是js没有正确运行导致手机端WordPress主题Enfold的主菜单显示异常

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
73 queries in 0.083 seconds, using 18.96MB memory