Когда вы открываете страницу, у меня есть навигационная панель для отображения слогана, и это панель, на которой находится кнопка переключения. Существует вторая панель навигации, которая является целью кнопки переключения. Отображается как боковое меню. Вы должны нажать кнопку переключения 2 раза, чтобы меню начало корректно переключаться.
<style>
#menu li a {
line-height: 22px;
height: 22px;
width: 160px;
background-size: auto;
text-align: right;
padding-top: 0px;
color: #eee;
}
#menu {
min-width: 210px;
}
.fa-bars {
color: white;
}
.businessAddress li {
list-style-type: none;
font-size: 14px;
text-align: right;
margin: 0;
color: #eee;
}
</style>
<div class="container">
<div>
<h1>
Company Header
</h1>
</div>
<div class="navbar bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="False" aria-label="Toggle navigation">
<span><i class="fa fa-bars"></i></span>
</button>
<h2 class="mx-auto">
Slogan
</h2>
</div>
<div class="row">
<div class="col-md-3">
<div class="navbar bg-success" id="menu">
<ul class="navbar-nav">
<li class="navItem active"><a href="#">Home Link</a></li>
<li class="navItem"><a href="#">Services Link</a></li>
<li class="navItem"><a href="#">Contact Link</a></li>
</ul>
<ul class="businessAddress d-none d-md-block">
<li> </li>
<li>Company Name</li>
<li>Street Address</li>
<li>City, ST Zip</li>
<li> </li>
<li>123-456-7890</li>
</ul>
</div>
</div>
</div>
</div>
Поведение заключается в том, что при первом открытии страницы панель меню уже отображается. Это желаемое поведение. Но вы должны нажать кнопку переключения 2 раза, чтобы боковое меню свернулось, и оно разрушается со второго хода. И после этого момента он будет правильно расширяться / разрушаться. Однако, если вы переходите по другой ссылке в меню или обновляете страницу, для правильной работы кнопки переключения требуется 2 щелчка.
Есть мысли о том, как заставить тумблер начать работать сразу же?
высоко ценится,
Kent