在引导程序 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-collapses 动画是通过快速添加.collapsing 类来执行的（这给它一个transition-duration 的.35s）。将持续时间设置为 0s 可以解决问题，但也会禁用打开动画，因为 Bootstrap 对打开和关闭动画使用相同的类。
如果他们使用不同的类来打开（比如：.expanding），

.collapsing { 
  transition-duration: 0s 
}

...就足够了。

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

理论上，当一个人非常快速地（每 350 毫秒超过一次）点击切换按钮时，这种方法有可能会中断，但是，由于它是一种边缘情况，并且涉及到使解决方案相当复杂，我选择不处理它。