更改开关后面主体的背景颜色和不透明度

Question

我昨天发布了这个问题 ()，我想阻止用户同时打开两个开关。根据一些用户的建议，我使用以下代码得到了我正在寻找的结果：

$(document).ready(function() {
  $('.toggle-1').click(function() {
    if ($('.toggle-2').hasClass('active')) {
      // remove toggle-2 active classes
      $('.toggle-2').removeClass('active');
      $('.toggle-2-content').removeClass('active');
    }

    $('.toggle-1').toggleClass('active');
    $('.toggle-1-content').toggleClass('active');
  });

  $('.toggle-2').click(function() {
    if ($('.toggle-1').hasClass('active')) {
      // remove toggle-1 active classes
      $('.toggle-1').removeClass('active');
      $('.toggle-1-content').removeClass('active');
    }

    $('.toggle-2').toggleClass('active');
    $('.toggle-2-content').toggleClass('active');
  });
});

现在我试图让用户无法在后台滚动，在活动切换后面设置不同的背景颜色和不透明度，但我通过添加以下代码没有成功：

                                    $('body').css({
  overflow: 'hidden',
  background-color: 'black',
  opacity: '0.5'
 });

我在上面的代码中插入新代码的方式如下：

$(document).ready(function() {
  $('.toggle-1').click(function() {
    if ($('.toggle-2').hasClass('active')) {
      // remove toggle-2 active classes
      $('.toggle-2').removeClass('active');
            $('.toggle-2-content').removeClass('active');
    }

    $('.toggle-1').toggleClass('active');
    $('.toggle-1-content').toggleClass('active');


    $('body').css({
      overflow: 'hidden',
      background-color: 'black',
      opacity: '0.5'
     });
  });



  $('.toggle-2').click(function() {
    if ($('.toggle-1').hasClass('active')) {
      // remove toggle-1 active classes
      $('.toggle-1').removeClass('active');
            $('.toggle-1-content').removeClass('active');
    }

    $('.toggle-2').toggleClass('active');
    $('.toggle-2-content').toggleClass('active');
  });
});

现在切换甚至不起作用。如果有人能告诉我我做错了什么，我将不胜感激。

在此先感谢您的帮助！

Answer 1

这是因为background-color的破折号，js把破折号放在变量里是无效的。（它将被解释为减法运算符）

尝试

$('body').css({
      overflow: 'hidden',
      'background-color': 'black',
      opacity: '0.5'
});

或

$('body').css({
      overflow: 'hidden',
      backgroundColor: 'black', // this is valid in jQuery css function
      opacity: '0.5'
});

更改开关后面主体的背景颜色和不透明度

Changing the background color and opacity of the body behind a toggle

html

javascript

jquery

background

document-body