菜单打开时禁用滚动体

时间:2018-09-04 07:53:42

标签: javascript wordpress menu onclick

我在wordpress中的菜单具有以下代码:

<nav role='navigation'>
    <div id="menuToggle" onclick="lockScroll()" >
        <input type="checkbox"  />
        <span></span>
        <span></span>
        <span></span>
        <ul id="menu">
            <?php
            wp_nav_menu( array(
                'theme_location' => 'menu-1',
            ) );
        ?>
        </ul>
    </div>
</nav>

此jQuery函数可在单击#menuToggle时禁用正文滚动:

<script>
    jQuery(function(lockScroll) {
        if ($('body').hasClass('lock-scroll')) {
            $('body').removeClass('lock-scroll');
        }
        else {
            $('body').addClass('lock-scroll');
        }
  });
</script>

但是它总是给我错误

  

未捕获的TypeError:$不是函数   HTMLDocument。

3 个答案:

答案 0 :(得分:0)

请尝试以下操作:-

jQuery(function(lockScroll) {
        if (jQuery('body').hasClass('lock-scroll')) {
            jQuery('body').removeClass('lock-scroll');
        }
        else {
            jQuery('body').addClass('lock-scroll');
        }
  });

答案 1 :(得分:0)

我不确定您所使用的“开放”是什么意思。该代码最有可能做正确的事情或将您推向正确的方向:

jQuery( '#menuToggle' ).click( function() {

    jQuery( 'body' ).addClass( 'lock-scroll' );

} );

jQuery( document ).on( 'mousedown', function( e ) {

    var c = jQuery('#menuToggle');

    if( !c.is( e.target ) && c.has( e.target ).length === 0 ) {

        jQuery( 'body' ).removeClass( 'lock-scroll' );

    }


} );

如果单击#menuToggle,将添加lock-scroll类(第一部分)。一旦您在#menuToggle之外单击,它将被删除(第二部分)。

答案 2 :(得分:0)

这样,a可以在单击时禁用滚动

<script>
    jQuery('#menuToggle').click( function(){

    jQuery( 'body' ).addClass( 'lock-scroll' );
        });

    </script>

再次单击该如何删除班级?