bootstrap-4 - 古怪的引导菜单切换行为
问题描述
当您打开页面时,我有一个导航栏来显示标语,并且是切换按钮所在的栏。第二个导航栏是切换按钮的目标。它显示为侧面菜单。您必须单击切换按钮 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 次才能开始正常工作。
关于如何让切换立即开始工作的任何想法?
非常感谢,肯特
解决方案
将collapse show
类添加到第二个导航栏。第二个导航栏的 HTML 应该是<div class="navbar bg-success collapse show" id="menu">
推荐阅读
- react-hook-form - 在 useFieldArray 中编辑单个项目
- extbase - Extbase:如何将关系映射到 extbase 中的 uid 以外的另一个字段
- javascript - Uncaught (in promise) TypeError: res.map is not a function
- node.js - AWS Lambda (NodeJS) > AWS 海王星 = 403
- sql - 在 ER 模式中表示门
- .net-core - REST API 控制器名称被丢弃(忽略)
- twilio - twilio webhook 自定义参数
- javascript - 在 Javascript 中使用 UTC 时区格式转换为本地时间
- c# - 从子继承访问抽象类成员
- r - 自定义 R 预订网站的 URL