菜单 onClick 更改 body 不透明度和颜色而不影响 header

Question

菜单点击更改 body 不透明度和颜色，但不影响 header 部分。 Header 必须继续使用不透明度 1 和白色背景。

另外，点击任意位置释放功能

$(document).ready(function() {

  $(document).on('click', 'button', function() {
    $('body').toggleClass('active')
  });    


  $(document).mouseup(function (e){
    var container = $('.popup');
    if (!container.is(e.target) 
        && container.has(e.target).length === 0)
    {
        container.slideUp();
    }
  });
});

    body.active {
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0.5;
    }

            <nav class="nav">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
              <button class="nav__toggle" aria-expanded="false" type="button">
                <i class="fa fa-bars" aria-hidden="true"></i>
              </button>
              <ul class="nav__wrapper">
                <li class="nav__item"><a href="#">Home</a></li>
                <li class="nav__item"><a href="#">About</a></li>
                <li class="nav__item"><a href="#">Services</a></li>
                <li class="nav__item"><a href="#">Hire us</a></li>
                <li class="nav__item"><a href="#">Contact</a></li>
              </ul>
            </nav>

Answer 1

如果我没看错，你想更改正文背景颜色和不透明度。我用 CSS() 制作了它，但如果您想使用 class 制作样式，您可以使用 addClass。

$('#clickMe').click(function(){
  $('body').css({'background-color':'rgba(0, 0, 0, 0.5)'});


});

body{
background-color:rgba(0, 0, 0, 1);
}

 #clickMe p {
 color: white;
 }
 header{
 height:50px;
 background-color:white;
 color:black
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<div>This is the header</div>
</header>
  <div id="clickMe">
      <p>Hello World! <br><u>Click me!</u></p>
  </div>


</body>

Answer 2

这将通过按钮切换背景，但在单击其他任何地方时总是会删除活动的 class。我假设按钮是 show/hide 导航，所以我也在那里添加了它

$(document).ready(function() {
  $(document).on('click', function(evt) {
    if (evt.target.id === 'buttonnav') {
      $('.nav__wrapper').toggle();
      if ($('.nav__wrapper').css('display') === 'none') $('body').removeClass('active');
      else $('body').addClass('active');

    } else
      $('body').removeClass('active')
  });


  $(document).mouseup(function(e) {
    var container = $('.popup');
    if (!container.is(e.target) &&
      container.has(e.target).length === 0) {
      container.slideUp();
    }
  });
});

body.active {
  background-color: rgba(0, 0, 0, 0.5);
}

body.active p,
body.active div,
body.active span,
body.active ul,
body.active li,
body.active a {
  opacity: 0.2;
}

.nav__wrapper {
  background: #fff;
}

body.active ul.nav__wrapper,
body.active ul.nav__wrapper li,
body.active ul.nav__wrapper li a {
  opacity: 1 !important;
}

<body>
  <nav class="nav">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id='buttonnav' class="nav__toggle" aria-expanded="false" type="button">
                click<i class="fa fa-bars" aria-hidden="true"></i>
              </button>
    <ul class="nav__wrapper" hidden>
      <li class="nav__item"><a href="#">Home</a></li>
      <li class="nav__item"><a href="#">About</a></li>
      <li class="nav__item"><a href="#">Services</a></li>
      <li class="nav__item"><a href="#">Hire us</a></li>
      <li class="nav__item"><a href="#">Contact</a></li>
    </ul>
  </nav>
  <p>Text to show opacity</p>
</body>

菜单 onClick 更改 body 不透明度和颜色而不影响 header

Menu onClick change body opacity and color with out effecting header

jquery

onclick

toggle

opacity