Question

我正在构建一个在屏幕上有3个组件的Web应用程序导航栏（粘性顶部）
主要集装箱
地图容器（主要的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做什么？

Answer 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

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

1 个答案: