переключать встроенные стили с помощью 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

Да, используйте toggleClass JQuery .

Создайте те 2 класса, которые я сделал в моем примере, как .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>

Answer 2

Как насчет этого кода? (Пример выполнения: https://codepen.io/hoge1e3/pen/mddbJPV)

var overlayVisible=false;
$(".button").click(function () {
    if (!overlayVisible) {
      $("#overlay").css("display", "block");
      $('body').css('overflow', 'hidden');
      overlayVisible=true;
    } else {
      $("#overlay").css("display", "none");
      $('body').css('overflow', 'auto');
      overlayVisible=false;
    }
});

Answer 3

Я использую это сейчас:

$('.button').on('click', function (e) {
    $('#overlay').toggle();
    if ($("#overlay").is(':visible')) {
        $("#overlay").css("display", "block");
        $('body').css('overflow-y', 'hidden');
    }
    else {
        $("#overlay").css("display", "none");
        $('body').css('overflow-y', 'auto');
    }
});