菜單打開時禁用滾動體

Question

我在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中的函數。

Answer 1

請嘗試：

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

Answer 2

我不確定您的情況下“開放”意味着什么。 這段代碼最有可能做正確的事或將您推向正確的方向：

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添加lock-scroll類（第一部分）。 在#menuToggle外部單擊鼠標后，它將被刪除（第二部分）。

Answer 3

這樣，單擊時可以禁用滾動

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

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

    </script>

再次單擊該如何刪除班級？