Question

我正在尝试使用jquery来切换<html>标签的滚动条。

我希望在单击#foo按钮时滚动条消失，而在单击＃bar1时重新出现。

$('#foo').click(function() {
  $('html').toggleClass("hidescroll");
});
$('#bar1').click(function() {
  $('html').toggleClass("hidescroll");
});

.hidescroll{
  overflow-y: hidden !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">foo</div>
<div id="bar1">bar1</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

当我单击#foo时，它消失了，但是没有在＃bar1上再次出现，但是当再次单击#foo时，它又出现了。

Answer 1

$("#foo, #bar1")

是您要寻找的选择器。

摘要：

$('#foo, #bar1').click(function() {
  $('html').toggleClass("hidescroll");
});

.hidescroll {
  overflow:hidden;
}
#main {
  width:100%;
  height:2000px;
  float:left;
}
#foo {
  float:left;
  width:100px;
  height:50px;
  background-color:red;
  margin-right:15px;
}
#bar1 {
  float:left;
  width:100px;
  height:50px;
  background-color:blue;
}

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>

Answer 2

您可以这样做...使用add和removeClass代替toggleClass ...

$('#foo').click(function() {
  $('html').addClass("hidescroll");
});

$('#bar1').click(function() {
  $('html').removeClass("hidescroll");
});

.hidescroll {
  overflow:hidden;
}
#main {
  width:100%;
  height:2000px;
  float:left;
}
#foo {
  float:left;
  width:100px;
  height:50px;
  background-color:red;
  margin-right:15px;
}
#bar1 {
  float:left;
  width:100px;
  height:50px;
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="foo"></div>
<div id="bar1"></div>
</div>

Answer 3

只是一种选择

bar =v=> $('html').css('overflow',v)
$('#foo').click(()=> bar('hidden'))
$('#bar1').click(()=> bar('scroll'))

使用多个ID单击时的jquery .toggleClass

3 个答案: