Question

我正在寻找一种方法将模糊应用到整个页面，除了显示导航菜单。

我正在使用Bootstrap 4，我注意到当我点击按钮时，类.show应用于.navbar-collapse。

这是我的HTML：

<div id="wrapper-navbar">
        <nav class="navbar navbar-expand-md navbar-light container" data-nav-status="toggle">

            <button type="button" class="navbar-toggler minus collapsed hidden-md-up" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div id="navbarNavDropdown" class="navbar-collapse collapse" style="">
                <ul> ... </ul>
            </div>

        </nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->

这就是我尝试用CSS做的事情：

.blur-body >:not(#wrapper-navbar){
    filter: blur(3px);
}

和JQuery：

$('.navbar-toggler').click(function (){
  if ( $('.navbar-collapse').hasClass('show') ) {
    $('body').addClass('blur-body');
  }
  else {
    $('body').removeClass('blur-body');
  }

})

不幸的是，这恰恰相反，在第一次点击时（当我打开菜单时）它没有做任何事情，当我关闭它时，它会应用模糊。我不明白为什么。

有些帮助吗？还是另一种不同的方法？

Answer 1

Bootstrap为您提供了可以挂钩的events。具体来说，当您使用导航栏时，您将使用#navbarNavDropdown作为下拉列表。因此，它获得了那些事件。使用它们作为触发器来引发您想要的行为：

$(function() {
  $('#navbarNavDropdown').on("show.bs.collapse", function() {
    $("body").addClass("blur-body")
  }).on("hide.bs.collapse", function() {
    $("body").removeClass("blur-body");
  });
})

.blur-body >:not(#wrapper-navbar) {
  filter: blur(3px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="wrapper-navbar">
  <nav class="navbar navbar-expand-md navbar-light container" data-nav-status="toggle">

    <button type="button" class="navbar-toggler minus collapsed hidden-md-up" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div id="navbarNavDropdown" class="navbar-collapse collapse" style="">
      <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Last</li>
      </ul>
    </div>

  </nav>
  <!-- .site-navigation -->
</div>
<!-- .wrapper-navbar end -->
<div class='content-pane'>
  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper
    sit amet ligula. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper
    sit amet ligula. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper
    sit amet ligula. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper
    sit amet ligula. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

除了导航之外，如何对整个身体应用模糊？

1 个答案: