如何在切换导航栏上粘贴切换 DIV答案

【问题标题】：How to stick a toggled DIV ontop of toggle NavBar如何在切换导航栏上粘贴切换 DIV
【发布时间】：2021-09-16 09:58:38
【问题描述】：

在下面的代码片段中，我有一个固定在底部的 NavBar，当我单击右箭头时会向上展开，当我单击左键时，我需要一个 div 向上展开，位于 NavBar 的顶部并坚持无论那个 div 的内容如何，但无论我尝试过哪个位置属性，甚至尝试过 flex，我都无法让它工作。

有谁能帮忙吗？

我的代码：

jQuery('.ExpandCollapsDIV').click(function(e) {
  jQuery('.collapse').collapse('hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />

<div class="collapse navbar-collapse bg-secondary" id="MessageDIVNav" style="position: absolute; bottom: 100px; width: 100%; background-color: #FFFFFF;">
  <font class="text-white" style="font-size: 12px;">
    <li>Top List 1</li>
    <li>Top List 2</li>
    <li>Top List 3</li>
    <li>Top List 4</li>
    <li>Top List 5</li>
    <li>Top List 6</li>
    <li>...</li>
  </font>
</div>


<nav class="navbar fixed-bottom navbar-expand-lg bg-primary">
  <div class="container-fluid">
    <table style="width: 100%">
      <tr>
        <td align="left">
          <div class="ExpandCollapsDIV" data-mdb-toggle="collapse" data-mdb-target="#MessageDIVNav" aria-controls="MessageDIVNav" aria-expanded="false" aria-label="Toggle navigation">
            <font class="text-white"><i class="fas fa-arrow-up fa-2x"></i></font>
          </div>
        </td>
        <td align="right">
          <div class="ExpandCollapsDIV" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContentBottom" aria-controls="navbarSupportedContentBottom" aria-expanded="false" aria-label="Toggle navigation" id="SystemInfodiv1"><i class="fas fa-arrow-down text-white fa-2x"></i></div>
        </td>
      </tr>
    </table>

    <div class="collapse navbar-collapse" id="navbarSupportedContentBottom">
      <font class="text-white" style="font-size: 12px;">
        <li>Bottom List 1</li>
        <li>BottomList 2</li>
        <li>BottomList 3</li>
        <li>...</li>
      </font>
    </div>
  </div>
</nav>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>

【问题讨论】：

标签： css mdbootstrap

【解决方案1】：

嗯，你试过了吗：

position: relative; 可选

z-index: 9999; 我相信更大的数字在上面，默认为零

【讨论】：

是的以及所有其他 4 个位置属性。 Z-Index 是关于一个不同的元素，我忘记删除它，将更新..