我正在构建一个在屏幕上有 3 个组件的网络应用程序。
导航栏(置顶)
主容器
map 容器(75% of main)
聊天窗口(占主窗口的 25%)
我想做的是隐藏聊天页脚，然后让 map 容器占据所有主容器，但如果用户想看到聊天窗口，他点击一个按钮， map 缩小回 75 % 的主窗口和聊天窗口再次可见。我希望此功能适用于所有 Bootstrap 断点，因此根据我的阅读，响应式可见性类不是我想要的。
我使用的javascript是
$('#chatToggle').click(function(e) {
console.log('in chatToggle');
var cf = document.getElementById('chatFooter');
var mc = document.getElementById('leafletMap');
if (cf.style.display === 'none') {
console.log('showing chat window');
cf.className = 'row h-15 ';
mc.className = "row h-85 map-container";
$('#chatToggle').text('Hide Chat')
} else {
console.log('hiding chat window');
cf.className = 'row h-15 d-none';
mc.className = "row h-85 map-container";
$('#chatToggle').text('Show Chat')
}
map.invalidateSize();
});
当页面首次加载时，它会按照我想要的方式显示，并且导航栏会响应断点，就像一个不错的响应式导航栏一样。但是，一旦我用上面的代码关闭聊天页脚，导航栏就会消失， map 会占据整个视口(viewport)， map 属性会在屏幕顶部变成一团乱麻。这是两个屏幕截图:
相关的 HTML 是:
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary navbar-fixed-top">
<a class="navbar-brand" href="#">
<span class=lg-view>TRACKING SYSTEM</span>
</a>
<div class="navbar-toggler">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navbarContent">
<ul class="navbar-nav " >
<li class="nav-item dropdown text-center" >
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" >
<a class="dropdown-item" data-toggle="modal" href="#realTimeModal">Real-Time Tracking</a>
<a class="dropdown-item" data-toggle="modal" href="#historicalModal">Historical Tracking</a>
<a class="dropdown-item" data-toggle="modal" href="#gridsModal">Display Grids</a>
<div class="dropdown-divider"></div>
<a id="stop_tracking" class="dropdown-item" href="#">Stop Tracking</a>
<a id="clear_grids" class="dropdown-item" href="#">Clear Grids</a>
</div>
</li>
<a class="flex-fill text-center text-light nav-link" href="#chatToggle" id="chatToggle" >Hide Chat</a>
<a class="flex-fill text-center text-light nav-link" href="#contact">Settings</a>
</ul>
</div>
</nav>
<div class="container-fluid h-100">
<div class="row h-75 map-container" id="leafletMap">
</div>
<div class="row h-25" id="chatFooter">
<div class="col-sm-2 border">
<h4 class="chatLabel">Chat History</h4>
</div>
<div class="col-sm-10 border">
<textarea readonly class="chatMsgTxt w-100 border" id="chatMsgTxt" style="border: 1px black;">test data</textarea>
</div>
</div>
</div>
</body>
在我的 CSS 中我有:
html,
body {
height: 100%;
}
是否可以使用 Bootstrap 4 完成我想做的事情？
最佳答案
代替所有额外的 JS 来处理按钮点击，使用 Bootstrap collapse component .为 hide/show events 添加处理程序调整 map 大小，并切换按钮文本:
$('.chat').on('hide.bs.collapse',function(){
mymap.invalidateSize();
$('#chatToggle').text("Show Chat");
}).on('show.bs.collapse',function(){
mymap.invalidateSize();
$('#chatToggle').text("Hide Chat");
});
使用 flexbox 可以更轻松地解决调整高度的问题。只需向 .map-container 添加一个类，以便在折叠聊天时自动增加高度。
.map-container {
flex: 1 1 auto;
}
关于jquery - 在调整传单 map 的高度时在 Bootstrap 4 中显示/隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49324792/