折腾：
【已解决】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：
但是是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的主菜单显示异常