如何在JQuery中添加和删除一个类来切换body标记上的滚动条

How do I add and remove a class in JQuery to toggle a scroll bar on the body tag

本文关键字：body 滚动条 一个 JQuery 添加 删除      更新时间：2024-04-03

我正在构造添加和删除一个类，以便隐藏并在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'));
});

因此，一个完整的例子可能看起来像：

<!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>
相关文章：