jquery mouseenter add class not working

时间:2016-10-07 19:07:21

标签: jquery wordpress

尝试使此脚本在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>

2 个答案:

答案 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是最古老的版本之一。