菜单 onClick 更改正文不透明度和颜色而不影响标题答案

【问题标题】：Menu onClick change body opacity and color with out effecting header菜单 onClick 更改正文不透明度和颜色而不影响标题
【发布时间】：2021-09-19 02:35:08
【问题描述】：

菜单 onClick 更改正文不透明度和颜色，而不影响标题部分。标题必须以不透明度 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>

【问题讨论】：

标签： jquery onclick toggle opacity

【解决方案1】：

这将使用按钮切换背景，但在单击其他任何位置时总是会删除活动类。我以为按钮是显示/隐藏导航所以我也添加了那里

$(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>

【讨论】：

同时包含导航的标题部分必须以不透明度 1 显示
好的，已更新。您不能在身体上应用不透明度并且不影响导航。但是，您可以对所有正文元素应用不透明度，然后排除 nav

【解决方案2】：

如果我做对了，您想更改正文背景颜色和不透明度。我是用 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>

【讨论】：