在Bootstrap 4中,可以通过使用navbar
组件来创建导航栏。如果需要同步多个导航栏和多个导航栏,可以按照以下步骤进行操作:
<nav>
元素来创建导航栏容器,并为每个导航栏容器添加一个唯一的ID。<nav id="navbar1" class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 导航栏内容 -->
</nav>
<nav id="navbar2" class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 导航栏内容 -->
</nav>
collapse
插件来实现导航栏的展开和折叠。$(document).ready(function() {
// 监听导航栏的点击事件
$('.navbar-toggler').click(function() {
// 获取当前点击的导航栏的ID
var navbarId = $(this).closest('nav').attr('id');
// 遍历所有导航栏,除了当前点击的导航栏
$('nav').not('#' + navbarId).each(function() {
// 判断导航栏是否已展开
if ($(this).hasClass('show')) {
// 折叠导航栏
$(this).collapse('hide');
}
});
});
});
<nav id="navbar1" class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo 1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent1" aria-controls="navbarContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent1">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<!-- 其他导航项 -->
</ul>
</div>
</nav>
<nav id="navbar2" class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent2" aria-controls="navbarContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent2">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<!-- 其他导航项 -->
</ul>
</div>
</nav>
以上代码示例中,使用了Bootstrap的navbar
、navbar-brand
、navbar-toggler
、collapse
、navbar-nav
和nav-item
等组件和样式来创建导航栏和导航项。通过JavaScript代码实现了点击一个导航栏时,折叠其他导航栏的功能。
对于腾讯云相关产品和产品介绍链接地址,可以根据具体需求和场景选择适合的产品。腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储、人工智能等。可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多信息。
领取专属 10元无门槛券
手把手带您无忧上云