删除在函数完成jquery之后添加的类

Question

当我单击＃slider-text内的按钮时，该区域将扩展为100vw，100vh。

我希望后面的“身体”在区域扩展时不滚动，并且当我单击按钮时（该区域恢复正常），这种可能性再次起作用。我该怎么做？

$('button').click(function(eryh){
$('#slider-text').toggleClass('fullscreen');
$("body").css("overflow", "hidden");
});

Answer 1

只需为您的body标签添加另一个类：

.overflow {
  overflow: hidden;
}

然后切换课程：

$('button').click(function(eryh){
  $('#slider-text').toggleClass('fullscreen');
  $("body").toggleClass("overflow");
});

Answer 2

您也可以通过在body中切换一个类来保存自己的JavaScript：

$('button').click(function() {
    $('#slider-text').toggleClass('fullscreen');
    $("body").toggleClass('no-overflow');
});

显然，您必须编写一些CSS，但这会使代码更清晰易读。

您甚至可以编写一些类似以下的CSS，以使其更加清晰：

body.fullscreen {
  overflow: hidden;
}
#slider-text.fullscreen {
  width: 100vw;
  height: 100vh;
}

和JavaScript：

$('button').click(function() {
    $('body, #slider-text').toggleClass('fullscreen');
});