我正在努力添加和删除一个类，以便隐藏然后显示 body 标记上的滚动 abr。到目前为止我有以下代码。
<label class="hamburger" for="sidebarToggler" id="menuToggle"></label>
<input type="checkbox" id="sidebarToggler" name="sidebar" value="">
$("#menuToggle").click(function () {
if ($('#menuToggle').hasClass('close-menu')) {
$('body').removeClass('hide-scroll');
}
else {
$('body').addClass('hide-scroll');
}
});
最佳答案
这里需要考虑一些可能会出错的事情。
确保您有正确的 jQuery 引用和“就绪”功能
您需要确保您正在编写的任何 jQuery 代码实际上都可以访问对 jQuery 库的引用，并且代码本身包装在一个“就绪”函数中，如下所示，以确保它仅在 jQuery 之后调用已加载:
<!-- Place your jQuery Reference here (or somewhere above here) -->
<script>
// Document ready function
$(function(){
$("#menuToggle").click(function () {
if ($('#menuToggle').hasClass('.close-menu')) {
$('body').removeClass('hide-scroll');
}
else{
$('body').addClass('hide-scroll');
}
});
});
</script>
确保您的标记正确
目前您缺少结束语 >为您<label>如果您使用 jQuery 定位事物，则可能会导致问题的元素(例如导致您的 click 事件未被拾取):
<label class="hamburger" for="sidebarToggler" id="menuToggle"></label>
或者如果您想将复选框包含在其中，只需这样处理即可:
<label class="hamburger" for="sidebarToggler" id="menuToggle">
<input type="checkbox" id="sidebarToggler" name="sidebar" value="">
</label>
使用 toggleClass() 简化您的代码功能
您的代码可以稍微简化，以使用 toggleClass() 切换您所定位的类。功能如下:
$("#menuToggle").click(function () {
// Explicitly toggle your class on this element
$(this).toggleClass('close-menu');
// Notice that you don't need the leading '.' when using the hasClass
// function
$('body').toggleClass('hide-scroll',$(this).hasClass('close-menu'));
});
所以一个complete example可能看起来像:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Scroll Hide Testing</title>
</head>
<body>
<label class="hamburger" for="sidebarToggler" id="menuToggle">
<input type="checkbox" id="sidebarToggler" name="sidebar" value="">
</label>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(function(){
$("#menuToggle").click(function () {
$(this).toggleClass('close-menu');
// Notice that you don't need the leading '.' when using the hasClass
// function
$('body').toggleClass('hide-scroll',$(this).hasClass('close-menu'));
});
});
</script>
</body>
</html>
关于javascript - 如何在 JQuery 中添加和删除类以切换 body 标记上的滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36501439/