Элементы панели навигации остаются видимыми в течение некоторого времени после закрытия свернутой панели навигации в начальной загрузке 4 - PullRequest
Новая
       9

Элементы панели навигации остаются видимыми в течение некоторого времени после закрытия свернутой панели навигации в начальной загрузке 4

0 голосов
/ 05 января 2019

Элементы Navbar остаются видимыми в течение некоторого времени после закрытия свернутой панели Navbar, как вы можете видеть на втором рисунке. 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;
}

Вот когда я сверну навигационную панель enter image description here

А вот как выглядит свернутый элемент в течение некоторого времени даже после закрытия навигационной панели enter image description here

Для отображения свернутой навигационной панели на всей странице и для изменения цвета при свертывании я использовал несколько 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;
}

Я не знаю, где проблема в моем коде. Наверное, это из-за увеличенного размера сворачивающейся навигационной панели.

1 Ответ

0 голосов
/ 05 января 2019

Измените 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 s анимация выполняется путем быстрого добавления к нему .collapsing класса (что дает ему transition-duration из .35s). Установка длительности на 0s устраняет проблему, но также отключает анимацию открытия, так как Bootstrap использует один и тот же класс для анимации открытия и закрытия.
Если бы они использовали другой класс для открытия (скажем: .expanding), 

.collapsing { 
  transition-duration: 0s 
}

... было бы достаточно.

Вот почему решение состоит в том, чтобы переключить пользовательский класс на целевом элементе (.opened) через 350 мс после нажатия переключателя и переопределить значение transition-duration только при наличии обоих классов.

Теоретически, этот метод может сломаться, когда вы нажимаете очень быстро (более одного раза каждые 350 мс) на кнопку переключения, но, поскольку это крайний случай, и он значительно усложняет решение, я решил не иметь дело с это.

...