我想在单击按钮时显示和删除 css 类,我知道有一个使用 toggleclass()
的解决方案,但我想使用 onClick
函数添加类。
这是代码
jQuery(document).ready(function(){
jQuery(".main-header-menu-toggle").click(function () {
jQuery("body").addClass('ast-main-header-nav-open');
});
});
我想将类添加到正文,当我单击按钮时它起作用了,但是当我再次关闭按钮时,它不会删除该类。
答案 0 :(得分:2)
它不会删除,因为没有从正文中删除类的代码。 请使用上面的代码如下:
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>
答案 1 :(得分:1)
正如上面的朋友所说,您可以通过简单的方式来完成。
当 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>