在调整传单地图高度的同时显示/隐藏Bootstrap 4中的div [英] Show/Hide div in Bootstrap 4 while resizing height of leaflet map
问题描述
我正在构建一个在屏幕上有3个组件的网络应用。
Navbar（粘性顶部）
主要容器
地图容器（主要的75％）
聊天窗口（主要的25％）
I'm building a web app that has 3 components on the screen.
Navbar (sticky top)
Main Container
map container(75% of main)
chat window (25% of main)
我想要做的是隐藏聊天页脚然后让地图容器占用所有主要内容容器，但如果用户想要查看聊天窗口，他点击一个按钮，地图缩小回主要的75％，聊天窗口再次可见。我希望这个功能可以在所有引导断点上工作，所以从我读到的响应可见性类不是我想要的。
What I want to be able to do is hide the chat footer then have the map container take up all of the main container, but if user wants to see the chat window, he clicks a button and the map shrinks back to 75% of the main and the chat window is visible again. I want this functionality to work across all the bootstrap breakpoints so from what I've read the responsive visibility classes are not what I want.
我正在使用的javascript是
The javascript I'm using is
$('#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();
});
当页面首次加载时，它会显示为我想要的状态，导航栏会响应断点和行为就像一个很好的响应导航栏。但是，只要我用上面的代码关闭聊天页脚，导航栏就会消失，地图会占据整个视口，并将地图归因变换为屏幕顶部的一些大问题。以下是两个屏幕截图：
When the page first loads, it appears as I want it and the navbar responds to the breakpoints and acts like a nice responsive navbar. However, as soon as I turn off the chat footer with code above, the navbar disappears, the map takes up the whole viewport and map attribution morphs into some big mess on the top of the screen. Here are two screenshots:
相关的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的操作？
Is it possible to accomplish what I'm trying to do with Bootstrap 4?
推荐答案
使用 Bootstrap折叠组件。为隐藏/显示活动添加处理程序以调整地图大小，并切换按钮文字：
Instead of all the extra JS to handle the button click, use the Bootstrap collapse component. Add handlers for the hide/show events to resize the map, and toggle the button text:
$('.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 中添加一个类，以便在聊天折叠时它自动增长。
The problem you're having with resizing heights is easier solved with flexbox. Just add a class to the .map-container so that it grows automatically in height when the chat is collapsed.
.map-container {
flex: 1 1 auto;
}
工作演示： https://www.codeply.com/go/jCa2CsQFYY
这篇关于在调整传单地图高度的同时显示/隐藏Bootstrap 4中的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
