Question

我想在单击按钮时显示和删除 css 类，我知道有一个使用 toggleclass() 的解决方案，但我想使用 onClick 函数添加类。

这是代码

jQuery(document).ready(function(){
   jQuery(".main-header-menu-toggle").click(function () {
      jQuery("body").addClass('ast-main-header-nav-open');
   });
});

我想将类添加到正文，当我单击按钮时它起作用了，但是当我再次关闭按钮时，它不会删除该类。

Answer 1

它不会删除，因为没有从正文中删除类的代码。请使用上面的代码如下：

jQuery(document).ready(function(){
   jQuery(".main-header-menu-toggle").click(function () {
      jQuery("body").toggleClass('ast-main-header-nav-open');
   });
});

通过使用toggleClass方法，一个类将在第一次点击时添加，当您再次点击按钮时将被删除。

如果它不适用于 Safari，请尝试使用 hasClass 方法

jQuery(document).ready(function(){
 jQuery(".main-header-menu-toggle").click(function () {
  if(jQuery("body").hasClass('ast-main-header-nav-open')){
    jQuery("body").removeClass('ast-main-header-nav-open')
  }else{
    jQuery("body").addClass('ast-main-header-nav-open');
  }
 });
});

body {
  background-color:green;
  display:block;
  height:200px;
  width:200px;
}
body.ast-main-header-nav-open{
  background-color:red;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a class="main-header-menu-toggle">Click me!</a>
</body>

Answer 2

正如上面的朋友所说，您可以通过简单的方式来完成。

当 hasClass 函数返回 true 时触发删除。当它返回false时，插入过程被触发。我们已经用 if 条件做到了这一点。

$(function() {
  $(".main-header-menu-toggle").click(function() {
    ($('body').hasClass('ast-main-header-nav-open')) ? $('body').removeClass('ast-main-header-nav-open'): $('body').addClass('ast-main-header-nav-open')
  });
});

.ast-main-header-nav-open {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<a class="main-header-menu-toggle">Click</a>
</body>

JQuery 添加和删除类 onclick

2 个答案: