самозагрузки Navbar мигает, когда не разрушилась

Question

Plunkr

меню начальной загрузки Navbar не сворачивается на маленьких экранах по умолчанию, если нажать на пункт меню.

Я добавил data-toggle="collapse" и data-target="#navbar-collapse" в каждый пункт меню, чтобы меню рушилось при выборе пунктов меню.

Пока все хорошо, но я заметил, что мигает, даже если размер экрана большой, а элементы навигатора не находятся в меню сэндвич. Я думаю, это анимация коллапса.

Мой вопрос в том, есть ли способ предотвратить это мигание/отключить анимацию с помощью CSS? Я знаю, что я мог бы убить анимацию с помощью jQuery, но я бы предпочел избежать этого, поскольку все приложение построено в Angular, и я думаю, что это не редкий случай использования.

Answer 1

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

Есть свой основной DIV вы держите все это в ВЕ navbar navbar-default затем положить container-fluid DIV внутри этого, и поместить это в сразу после:

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBodyId" aria-expanded="false"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Page Title</a> 
</div> 

Тогда вы можете иметь свой Navbar так:

<div class="collapse navbar-collapse" id="navBodyId"> 
    <ul class="nav navbar-nav"> 
    ... 
    </ul> 
</div> 

, а затем закрыть те 2 вещи, которые я упомянул в верхней части.

Вам не нужно сворачивать каждую часть меню. Надеюсь, это поможет, если нет, сайт Bootstrap - действительно хороший ресурс, у них есть куча примеров с исходным кодом прямо ниже, но я уверен, что вы это знаете.