尝试使此脚本在WordPress上运行并且无法正常工作。 chrome dev控制台上没有显示任何错误,可能是什么问题?
这是html:
<script type='text/javascript' src='https://gravitywiz.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.bm-header__nav-menu-item.has-submenu').on({
mouseenter: function() {
var submenu = $(this).find('.bm-header__nav-submenu');
submenu.show(0).removeClass('nav-submenu-hide').addClass('nav-submenu-show');
},
mouseleave: function() {
var submenu = $(this).find('.bm-header__nav-submenu');
submenu.removeClass('nav-submenu-show').addClass('nav-submenu-hide').delay(300).hide(0);
}
});
$('.nav-submenu-langs .bm-header__nav-submenu-item').on('click', function(){
$('.nav-submenu-langs .bm-header__nav-submenu-item').removeClass('lang-item-active');
$(this).addClass('lang-item-active');
});
});
</script>
<header class="bm-header transparent_nav">
<div class="bm-header__wrp inner960 cf">
<div class="bm-header__logo">
<a href="#" class="bm-header__logo-img"></a>
</div>
<nav class="bm-header__nav">
<ul class="bm-header__nav-menu">
<li class="bm-header__nav-menu-item has-submenu ">
<a href="#" class="bm-header__nav-menu-item-l ">#</a>
<ul class="bm-header__nav-submenu nav-submenu-products ">
<li class="bm-header__nav-submenu-item">
<a href="#" class="bm-header__nav-submenu-item-l product-item-brick"><span>#</span><br/># </a>
</li>
<li class="bm-header__nav-submenu-item">
<a href="#" class="bm-header__nav-submenu-item-l product-item-pwlocal"><span>#</span><br/> #</a>
</li>
<li class="bm-header__nav-submenu-item">
<a href="#" class="bm-header__nav-submenu-item-l product-item-spiderpipe"><span>#</a>
</li>
</ul>
</li>
<li class="bm-header__nav-menu-item ">
<a href="#" class="bm-header__nav-menu-item-l ">#</a>
</li>
<li class="bm-header__nav-menu-item ">
<a href="#" class="bm-header__nav-menu-item-l ">#</a>
</li>
<li class="bm-header__nav-menu-item ">
<a href="#" class="bm-header__nav-menu-item-l ">#</a>
</li>
<li class="bm-header__nav-menu-item has-submenu ">
<a href="#" class="bm-header__nav-menu-item-l ">#</a>
<ul class="bm-header__nav-submenu ">
<li class="bm-header__nav-submenu-item">
<a href="#" class="bm-header__nav-submenu-item-l">#</a>
</li>
<li class="bm-header__nav-submenu-item">
<a href="#" class="bm-header__nav-submenu-item-l">#</a>
</li>
<li class="bm-header__nav-submenu-item">
<a href="#" class="bm-header__nav-submenu-item-l">#</a>
</li>
<li class="bm-header__nav-submenu-item">
<a href="#" class="bm-header__nav-submenu-item-l">#</a>
</li>
<li class="bm-header__nav-submenu-item">
<a href="#" class="bm-header__nav-submenu-item-l">#</a>
</li>
<li class="bm-header__nav-submenu-item">
<a href="#" target="_blank" class="bm-header__nav-submenu-item-l">#</a>
</li>
</ul>
</li>
<div class="bm-header__nav-account-area">
<li class="bm-header__nav-menu-item menu-item-demo"><a href="#" class="bm-header__nav-menu-item-l">#</a></li>
<li class="bm-header__nav-menu-item menu-item-memb"><a href="#" class="bm-header__nav-menu-item-l">#</a></li>
<li class="bm-header__nav-menu-item has-submenu menu-item-lang-switcher">
<div class="menu-item-current-lang lang-item-us">US</div>
<ul class="bm-header__nav-submenu nav-submenu-langs">
<li class="bm-header__nav-submenu-item lang-item-us "><a href="#" class="bm-header__nav-submenu-item-l">English</a></li>
</ul>
</li>
</div>
</ul>
</nav>
</div>
</header>
我也使用类似的脚本,菜单相同,工作正常。 一直在浏览互联网几个小时,不得不在这里问这个问题。请帮忙!
这是使用我当前的html工作正常的代码:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.home_device').animate({marginLeft: '0'}, 600);
$('.bm-header').addClass('transparent_nav');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >=150) {
$(".bm-header").removeClass("transparent_nav");
} else {
$(".bm-header").addClass("transparent_nav");
}
});
});
</script>
答案 0 :(得分:0)
你确定它正确运行js吗?如果你放置一个console.log('mousenter');在mouseenter函数内部会发生什么?
我用mouseleave函数做同样的事情。
示例:console.log("mouseleave");
http://codepen.io/dillonlara115/pen/KgQAEq
(确保您的浏览器开发工具已打开以查看控制台)
如果您将控制台悬停在这些控制台上进行调整,那么您就知道js正在运行。如果它不这样做,那么它就是其他东西。
一般来说,您会将自定义js代码放在页脚中,因此如果js中出现问题,则不会阻止页面的其余部分正确加载。话虽如此,您可以尝试将自定义js放在页脚中,看看是否有效。
答案 1 :(得分:0)
有一个WordPress插件导致冲突,我禁用它并开始工作。
插件:Rev Slider是最古老的版本之一。