javascript - 使用 JQuery 切换内联样式 - 显示和溢出

Question

你能看看我的代码吗:

$(".button").click(function () {
    $("#overlay").css("display", "block");
    $('body').css('overflow', 'hidden');
});

当我们再次单击 .button 时，我需要切换此样式。那应该是这样的:

$(".button").click(function () {
    $("#overlay").css("display", "none");
    $('body').css('overflow', 'auto');
});

JSfiddle

Answer 1

是的，使用 JQuery's toggleClass .

创建我在示例中所做的那两个类 .display-show & .body-show

试试这个:

$(".button").click(function() {
        $("#overlay").toggleClass('display-show');
        $('body').toggleClass('body-show');
});

body {
  overflow: hidden;
  }

#overlay {
  background-color: red;
  opacity: 0.1;
  width: 100px;
  height: 100px;
  }
  
.display-show {
  display: none;
  }
  
.body-show {
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="button">Button</a>
<div id="overlay"></div>

更新 1:(根据您的 jsfiddle)

$(".button").click(function() {
        $("#overlay").toggleClass('display-show');
        $('body').toggleClass('body-show');
});

body {
  font-family: sans-serif;
  height: 1500px;
  padding: 20px;
  overflow: hidden;
}

.button {
  border: 0;
  background: red;
  color: #fff;
  padding: 10px 30px;
  text-decoration: none;
}

#overlay {

  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
}

.display-show {
  display: block !important;
}

.body-show {
  overflow: auto !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="button">Button</a>

<div id="overlay"></div>