[英]disable scroll body when menu is open wordpress
My menu in wordpress has the following code: 我在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>
And this jQuery function to disable scroll in body when #menuToggle
is clicked: 这个jQuery函数可以在单击#menuToggle
时禁用主体中的滚动:
<script>
jQuery(function(lockScroll) {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
});
</script>
But it always gives me the error 但这总是给我错误
Uncaught TypeError: $ is not a function at HTMLDocument. 未捕获的TypeError:$不是HTMLDocument中的函数。
Please Try This:- 请尝试:
jQuery(function(lockScroll) {
if (jQuery('body').hasClass('lock-scroll')) {
jQuery('body').removeClass('lock-scroll');
}
else {
jQuery('body').addClass('lock-scroll');
}
});
Im not exactly sure what 'open' means in your case. 我不确定您的情况下“开放”意味着什么。 This code should most likely do the right thing or push you in the right direction: 这段代码最有可能做正确的事或将您推向正确的方向:
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' );
}
} );
If you click #menuToggle
the lock-scroll
class is added (first part). 如果单击#menuToggle
, lock-scroll
添加lock-scroll
类(第一部分)。 As soon as you click outside of #menuToggle
it will be removed (second part). 在#menuToggle
外部单击鼠标后,它将被删除(第二部分)。
This way a can disable the scroll when click 这样,单击时可以禁用滚动
<script>
jQuery('#menuToggle').click( function(){
jQuery( 'body' ).addClass( 'lock-scroll' );
});
</script>
How can i remove class when click again? 再次单击该如何删除班级?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.