在调整传单地图的高度时在 Bootstrap 4 中显示/隐藏 div答案

【问题标题】：Show/Hide div in Bootstrap 4 while resizing height of leaflet map在调整传单地图的高度时在 Bootstrap 4 中显示/隐藏 div
【发布时间】：2018-03-16 15:49:34
【问题描述】：

我正在构建一个屏幕上有 3 个组件的网络应用程序。
导航栏（置顶）
主容器
地图容器（主要的 75%）
聊天窗口（主窗口的 25%）

我想要做的是隐藏聊天页脚然后让地图容器占据所有主容器，但是如果用户想看到聊天窗口，他点击一个按钮，地图缩小到 75 % 的主窗口和聊天窗口再次可见。我希望此功能能够跨所有引导断点工作，因此从我所读到的响应可见性类不是我想要的。

我使用的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();
  });

当页面第一次加载时，它会按照我想要的方式显示，并且导航栏会响应断点并像一个很好的响应式导航栏一样。然而，一旦我用上面的代码关闭了聊天页脚，导航栏就会消失，地图占据了整个视口，地图属性在屏幕顶部变成了一些大杂烩。下面是两张截图：

相关的 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 完成我想要做的事情？

【问题讨论】：

为什么不直接使用Bootstrap collapse component？

标签： jquery css twitter-bootstrap leaflet bootstrap-4

【解决方案1】：

使用Bootstrap collapse component代替所有额外的JS来处理按钮点击。为hide/show events 添加处理程序以调整地图大小，并切换按钮文本：

$('.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;
}

工作演示：https://www.codeply.com/go/jCa2CsQFYY

【讨论】：

这太完美了！当我第一次在我的代码中尝试它时，它不起作用。然后我意识到您使用的是 jquery.slim.min 而我使用的是完整的 jquery。 slim 有一些特别之处，可以让一切正常工作。但是感谢您的出色指导。感谢 StackOverflow 和像你这样乐于助人的人，我每天都变得更聪明了！ :)