css - 在 bootstrap 4 中关闭折叠的导航栏后，导航栏元素仍然可见一段时间

Question

如您在第二张图片中看到的那样，在关闭折叠的导航栏后，导航栏元素仍然可见一段时间。 HTML代码:

 <nav class="navbar navbar-dark fixed-top" style="background-color: transparent;>
  <a class="navbar-brand" href="#">Muhammad Yasir</a>
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="my-1 mx-2 close">X</span>
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Resume</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>

    </ul>
  </div>
</nav>

CSS 代码:

.navbar-toggler>.close {
    display:inline;
    color: white;
}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
    display:none;
}

这是我折叠导航栏的时候

这是关闭导航栏后折叠元素显示一段时间的方式

为了在整个页面上显示折叠的导航栏并在折叠时更改颜色，我使用了一些 javascript 和 css。 Javascript 代码:

$(".navbar-toggler").click(function(){
$("nav").toggleClass("navbar-blue");
})

CSS 代码:

.navbar-collapse {
    height: 100vh;
}
.navbar{
    color: white;
}
.navbar-blue{
    background-color: #23415C !important;
}

我不知道我的代码哪里有问题。我想这可能是由于折叠导航栏的尺寸增加所致。

Answer 1

将JS改成

$(".navbar-toggler").on('click', function(e){
  $("nav").toggleClass("navbar-blue");
  setTimeout(() => {
    $($(e.target).closest('.navbar-toggler').data('target')).toggleClass('opened')
  }, 350);
})

...并将其添加到您的 CSS 中:

.collapsing.opened {
  transition-duration: 0s;
}

看到它工作:

$(".navbar-toggler").on('click', function(e){
  $("nav").toggleClass("navbar-blue");
  setTimeout(() => {
    $($(e.target).closest('.navbar-toggler').data('target')).toggleClass('opened')
  }, 350);
})

.navbar-toggler>.close {
    color: white;
}
.navbar-toggler.collapsed>.close, .navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
    display:none;
}


.navbar{
    color: white;
}
.navbar-blue{
    background-color: #23415C !important;
}

.collapsing.opened {
  transition-duration: 0s;
}
.navbar-collapse > .navbar-nav {
  height: calc(100vh - 58px);
}
.navbar-toggler>.close {
  width: 30px;
  height: 30px;
}
body {
  background-color: #212121 !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark fixed-top" style="background-color: transparent;">
  <a class="navbar-brand" href="#">Muhammad Yasir</a>
  <button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="close">X</span>
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Resume</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>

    </ul>
  </div>
</nav>

此外，

.navbar-collapse > .navbar-nav {
  height: calc(100vh - 58px);
}

...修复折叠的开始动画(移除跳跃)，以及

.navbar-toggler>.close {
  width: 30px;
  height: 30px;
}

... 结合从中删除 mx-1 my-2 类将阻止您的标题在关闭/打开 .navbar-collapse 时稍微改变位置。

---

下面是上面的工作原理:

.navbar-collapse 的动画是通过快速添加 .collapsing 类来执行的(这给了它 transition-duration .35s)。将持续时间设置为 0s 可以解决问题，但也会禁用打开动画，因为 Bootstrap 对打开和关闭动画使用相同的类。
如果他们使用不同的类来打开(比如:.expanding)，

.collapsing { 
  transition-duration: 0s 
}

... 就足够了。

这就是为什么解决方案是在按下切换器 350 毫秒后在目标元素 (.opened) 上切换自定义类，并且仅在以下情况下覆盖 transition-duration 值两个类都存在。

从理论上讲，当您非常快速地(每 350 毫秒超过一次)点击切换按钮时，此方法可能会失败，但是，由于这是一种边缘情况，并且它涉及到使解决方案相当复杂，所以我选择不处理